To follow up, I ended up using the advanced options of the @font-face generatorto subset my fonts, so I only loaded the characters needed.
One of the options was to Base64 encode the fonts (which allowed me to embed them in my CSS file). If memory serves, it Base64 encodes the
.woff and the
While I like to support as many users of as many browsers as possible, I decided it wasn't worth slowing down the users of modern browsers with extra, likely redundant, data so I used Modernizr (which uses yep/nope.js) to asynchronously load a separate
CSS file with references to all the font formats as per the hardened bulletproof font face syntax.
I went back and forth between Base64 encoding the
.woff font and including the rest of the font declarations in the primary
CSS file or only including the Base64 encoded
.woff in the primary
CSS and then including the other formats in a
CSS file which I loaded asynchronously via
I prefer fast load times to aesthetics so FOUC wasn't a big concern but I will note that most browsers sort of 'blinked' on the fonts when they loaded (which was after the Base64 encoded fonts in the
CSS had loaded) async.
On the plus side, once the fonts were loaded and stored in cache (long expires headers set on server) the 'blink' was eliminated and I was able to load extended sets of the fonts so that users who spoke other languages (and used the Google translate widget that was included) would still see stylized text.
Since this was my own site, I was able to experiment but I was largely doing it to "show off", I am more conservative with client sites.
Another technique I implemented was putting all the
.svg fonts into a single file and identifying each with its own ID rather than having each in a separate file as the @font-face generator produces.