So. @font-face is unfamiliar scary stuff? Here are some links to enjoy:
font-face basics: different file types in different browsers, and quirks.
- html5 rocks article
- caniuse for woff, ttf, eot, svg
FOUT: what happens until your fonts load
- paul irish latest
- typekit's API lets you control this
- fonts.com's API lets you control this
- google's API does also, docs kinda opaque
What happens if your fonts never load? Great sadness.
- steve souders @font-face perf article 2009, see section titled '@font-face outage'
refs on @font-face syntax:
- weights and styles with font-face, 2013
- 2009: paul irish, orig bulletproof article
- 3/2010: mo' bulletproofer.
- 2011: fontspring's best practices
- 2011: fontspring's best practices revised slightly for IE9
fontsquirrel generator:
- the definitive how-to article
- june 2012: fontsquirrel disables SVG support (icon fonts)
- sparse docs for fontsquirrel API
other web-based providers of fonts:
- free:
- paid:
common firefox bugs: Access-Control-Allow-Origin header for serving cross-domains, proper MIME type if serving locally
font-face performance
- sept 2012 - igvita web fonts performance overview
- if you DIY:
- support all the file formats
- optimize your fonts
- serve the right versions
- keep up with latest developments
- or, use a hosted provider.
- if you DIY:
typographical niceties not necessarily related to font-face: