This document discusses various techniques for loading web fonts while minimizing performance impacts. It begins by explaining first-observed font rendering issues and browser behaviors. It then evaluates options for font serving, techniques for font file optimization, and several approaches to asynchronous font loading: loading fonts externally and synchronously; inline encoding; simple asynchronous loading; using local storage; and deferring loading to subsequent pages. The document considers tradeoffs of each approach and notes ongoing browser work to improve font loading performance. It concludes by discussing potential future techniques like client hints and giving authors more control over font rendering.
10. Why are fonts critical?
• FOUT, what is it?
• Where did it come from?
• How big a deal is it?
Friday, 31 May 13
11. The Browser
• Leverage them!
• They do your work for you
• But... you don’t always have to agree with
them
Friday, 31 May 13
12. “...user agents may render text as it would be
rendered if downloadable font resources are not
available or they may render text transparently with
fallback fonts to avoid a flash of text using a fallback
font.”
The Spec
In cases where the font download fails user agents
must display text, simply leaving transparent text is
considered non-conformant behavior.”
Friday, 31 May 13
13. The Implementation
IE FF
Chrome, Safari,
Opera (2.15)
Text rendered
immediately then
repainted later
Invisible Text
3s Timeout
Invisible Text
No Timeout
PS.They’re working on it...
https://bugs.webkit.org/show_bug.cgi?id=25207 ~ 2009
https://code.google.com/p/chromium/issues/detail?id=235303 ~ 2013
Friday, 31 May 13
15. Font Serving Services
• JS Options e.g.Typekit
• Google Web Font Loader
http://www.slideshare.net/clagnut/responsive-web-fonts
• Self hosted
Friday, 31 May 13
16. What’s in a font?
TypeTool, Font Forge, Glyphs & Glyphs Mini
Friday, 31 May 13
20. Implementation Techniques
(On & Off the Critical Path)
1. Synchronous, external
2. Synchronous, inline
3. Simple async solution
4. Local Storage async
5. Async and defer to 2nd page
Friday, 31 May 13
22. Synchronous, inline
• WOFF can be base64 encoded and inlined.
• Slower perceived speed
• Don’t serve it to IE!
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link href="common_core_with_base64.css" media="all" rel="stylesheet"
type="text/css" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link href="common_core_without_base64.css" media="all"
rel="stylesheet" type="text/css" />
<![endif]-->
Friday, 31 May 13
23. Simple Async
var f, x;
x = document.getElementsByTagName("script")[0];
f = window.document.createElement("link");
f.rel = "stylesheet";
f.href = "#{asset_path("woff.css")}";
window.setTimeout(function(){
x.parentNode.insertBefore(f, x);
},0)
• Don’t forget to factor in non-woff versions
Friday, 31 May 13
24. Local Storage Async
• Uses the browser Local Storage rather than
HTTP Cache
• A solution by the Guardian Team (https://
github.com/guardian/frontend/blob/master/common/app/
assets/javascripts/modules/fonts.js)
• Loads the font with (well controlled) FOUT
Friday, 31 May 13
25. Async & Defer
// HEADER
if fonts_are_cached do
<link href=”woff.css” rel=”stylesheet” />
end
// FOOTER
if !fonts_are_cached do
<script>
// Load in custom fonts
$.ajax({
url: '#{asset_path("woff.css")}',
success: function () {
// Set cookie
}
});
</script>
end
Read more: http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/
Friday, 31 May 13
27. What next?
• Client hints, connectionType and its blatant
misuse
• Browsers giving authors the option of how
to render a custom font
Friday, 31 May 13