I need to use a non-standard font purchased from myfonts.com so we're using their webfont kit and upon testing in Safari, I 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 - inline as a giant string. We don't have the actual .otf files.

This is how it looked: alt text alt text

So firstly I added gzipping of all css/font/js files, which helped but it's still a 1mb download.

Next Up, I searched and found that I could apparently decode from that base64 string into a font file using this - the result I saved as a .otf file and linked to that instead. This seemed to fix it.

But now, I'm getting this warning in safari at random times:

alt text

motobit.com is that domain of that converter where I decoded it. Should I use a different tool or is this is what happens when you link to a otf file directly using @font-face.

1 answer


I was observing how the zurb team does this (works in almost all browsers) on their Zurb Playground - Reveal Modal jQuery plugin page:

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('/fonts/Chunkfive-webfont.eot');
    src: url('/fonts/Chunkfive-webfont.woff') format('woff'), url('/fonts/Chunkfive-webfont.ttf') format('truetype'), url('/fonts/Chunkfive-webfont.svg#webfont90E2uSjN') format('svg');
    font-weight: normal !important;
    font-style: normal !important;

You'll notice they're quite prepared with many formats... I would look for a converter, but then again that's probably a usage infringement right depending on the font and licensing along with that...

This isn't an answer, but a possible alternative solution to make your life easier: You can try finding a good match and do it the "easy" way with Google Web Fonts

Answered almost 8 years ago by Gary Hepting