As system fonts get nicer you might consider treating them like first-class citizens on your web site
Ire Aderinokun writes:
A few months ago, I wrote about how you can use system fonts in the browser using the built-in keywords that work with the font shorthand property (see Using System Fonts in the Browser).
Relatively recently, some websites and web applications have been adopting a new method for using system fonts in the browser. With this method, the fonts used by different systems are explicitly called themselves in the font-family property.
Read more from the source: bitsofcode
The font event API is out in Chrome and coming in Firefox 36 but you can use it now with this polyfill
Jonathan Suh writes:
Also see http://caniuse.com/#feat=font-loading
Read the full article Jonathan Suh
A clever way to avoid the flicker that a custom font introduces
The idea is to only load a font from the server once. Then we store the data into the localStorage. On subsequent requests we load the font directly from localStorage. This eliminates the flashing on subsequent page loads. Only the first load is affected by the flashing.
Overview of the script
1. We let the old browsers stop early. Testing for window.addEventListener or some knows user agents (older Android stock browser, Opera Mini, etc.) is good enough.
2. In some cases localStorage can be unreachable, although the browser supports WOFF fonts. For theses cases I provide some fallback.
3. Then we check whether the font is already stored in localStorage. If it is, we load it immediately.
4. If it hasn’t been loaded before, we load it with an AJAX call. But first we check for WOFF2 support.
5. Then we store the data into localStorage and load the css text into a style element.
Read full article at bdadam.com
Worried about site speed and font-blocking? 79% of visitors use browsers that support the .woff format. So why not embed fonts as a data URI into your css?
IcoMoon and FontSquirrel already provide an option to Base64 encode the font into CSS.
The author of an article at SoSweet! Creative, Stephen Scaff, writes:
Now this does add considerable weight to your css, and its shear length is a bit unruly. So, I opt to create a separate fonts.css file, including base64 @font-face for all my fonts and custom icon font set. Obviously, I load this file after all other css assets. Of course, you can further minimize size by gzipping, but I’ve yet to experience any performance or Flash of Unstyled Content (FOUC) issues.
See Can I Use for the latest support matrix for the .woff format.
With Can I Use, you may even consider server-side user agent sniffing to ensure speedy downloads for older Android and IE8.
Read more from SoSweet! Creative