3

This is the first time I've used @font-face. The font pack is from myfonts.com and I'm currently testing in Safari and noticed through the web inspector that the css file, which loads the 2 fonts shows as a nearly-2mb-download ! the fonts appear to be there as base64 encoded. The pack didn't include the actual .otf files.

enter image description here

enter image description here

I've added Gzipping via a .htaccess file and this has cut down the size of that file by nearly half but at 1mb, it's still not acceptable and I can't understand why it's so big.

gio
  • 991
  • 3
  • 12
  • 24

2 Answers2

2

Base64 is larger than the original file around 1.3 - from wikipedia. You can convert the file back to its original state with this convertor, but there are a lot of tool on the net.

Bakudan
  • 19,134
  • 9
  • 53
  • 73
  • Thanks, I used the converter to export as bin file and then renamed to .otf, seemed to work and result in a much smaller download. But when I visit the site now, I get [this wanning](http://img683.imageshack.us/img683/3281/screenshot20110608at724.png) - can anything be done about that? – gio Jun 08 '11 at 07:27
  • @gio I`m not sure. This may be a protection for the system. If you have the font as a file in the web folder, you can not use it must be installed and the browser does not have the rights to do this by itself, I think. When installed, probably this message won`t appear anymore. – Bakudan Jun 08 '11 at 07:55
  • Hi, when you say it must be installed, do you mean the user must have it installed? – gio Jun 09 '11 at 07:04
  • @gio I was not quite write - it must be installed to be usable on the system. @font-face don`t make it install on the system. I`ve tested on Safari 5.0.5 there was no message, and the font was not installed. Sorry if the info was misleading. – Bakudan Jun 09 '11 at 08:07
  • Yeah that's what I thought, you don't need to install. So I wonder if it was just a case of that converter being the problem.. perhaps I will look for another... – gio Jun 09 '11 at 08:18
1

Either download the font files through myfonts.com ( http://new.myfonts.com/fonts/typodermic/great-escape-rg/ ) or use font-squirrel generator to make them from the original files if you have previously purchased them ( http://www.fontsquirrel.com/fontface/generator )

colinross
  • 2,075
  • 13
  • 10