@font-face with data URIs and Font Squirrel’s @font-face generator

Question

I am developing a JavaScript application for modern browsers and I don't need to support older ones. I want to embed the fonts in my CSS file instead of loading them.

For all the browsers that I want to support, I just need the WOFF and TTF fonts.

Now when I use the Font Squirrel’s @font-face generator, with "base64 encode" -- it only gives me the data URI for WOFF type and NOT for the TTF type.

Why does it do it?

bob bob · Accepted Answer · 2014-06-03T13:18:25

I believe the reason is to minimize overall file size / load time.

Some devices have a 25kb limit in order to maintain files "cached". When the TTF and the WOOF are base64'd the CSS file can exceed the limits and cause a reload each visit.

Browsers will use the first font "it can" (or "cascade" if you will). You will see the formats listed in the following order for specific reasons:

1. EOT - used to catch older IE (<9).

IE will choke with multiple "src". You'll often see ?#iefix involved in the EOT reference, or an additional selector with just the EOT file in there followed by a similar selector witht he WOFF and TTF. Plus, since old IE doesn't do datauri, we have to leave as an external file.

2. WOFF - Most modern browsers.

Most modern browsers will use WOFF. This format is very small, even with base64 encoding. So keeping it within the CSS makes sense. Plus WOFF may not upload via FTP properly and/or the server may not have the proper mime's set for the WOFF extension.

3. TTF - used to catch Android, and some older browsers.

The older browsers that need TTF are: - old Safari (5.0) - old IOS (<4.2) - old Opera (10.0) Again, including the TTF as "heavy" base64, the CSS file may be too big for some devices to cache. Keeping the TTF as a binary and as an external file is smart because it'll only get loaded/used if needed.

Here's simple chart based on caniuse.com's data:

---------------
EOT
---------------
IE      >= 6
FF      -
Chrome  -
Safari  -
Opera   -
O mini  -
O Mobi  -
IOS     -
Android -

---------------
WOFF
---------------
IE      >= 9
FF      >= 3.6
Chrome  >= 16
Safari  >= 5.1
Opera   >= 11.6
O mini  -
O Mobi  >= 11.0
IOS     >= 5
Android -

---------------
TTF
---------------
IE      -
FF      >= 3.6
Chrome  >= 16.0
Safari  >= 5.0
Opera   >= 11.6
O mini  -
O Mobi  >= 10.0
IOS     >= 4.2
Android >= 2.2

@font-face with data URIs and Font Squirrel’s @font-face generator

1 Answers