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

i developing javascript application modern browsers , don't need support older ones. want embed fonts in css file instead of loading them.

for browsers want support, need woff , ttf fonts.

now when use font squirrel’s @font-face generator, "base64 encode" -- gives me data uri woff type , not ttf type.

why it?

i believe reason minimize overall file size / load time.

some devices have 25kb limit in order maintain files "cached". when ttf , woof base64'd css file can exceed limits , cause reload each visit.

browsers use first font "it can" (or "cascade" if will). see formats listed in following order specific reasons:

1. eot - used catch older ie (<9).

ie choke multiple "src". you'll see ?#iefix involved in eot reference, or additional selector eot file in there followed similar selector witht woff , ttf. plus, since old ie doesn't datauri, have leave external file.

2. woff - modern browsers.

most modern browsers use woff. format small, base64 encoding. keeping within css makes sense. plus woff may not upload via ftp and/or server may not have proper mime's set woff extension.

3. ttf - used catch android, , older browsers.

the older browsers need ttf are: - old safari (5.0) - old ios (<4.2) - old opera (10.0) again, including ttf "heavy" base64, css file may big devices cache. keeping ttf binary , external file smart because it'll 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