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.

1. Web Fonts vs Web
Performance
@ianfeather - Front End London, May 2013
Friday, 31 May 13

2. Friday, 31 May 13

3. Friday, 31 May 13

4. Friday, 31 May 13

5. Friday, 31 May 13

6. Friday, 31 May 13

7. How Critical is
Critical?
Friday, 31 May 13

8. Friday, 31 May 13

9. Friday, 31 May 13

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

14. What are our options?
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

17. Subset your font
Don’t forget the Legals
Friday, 31 May 13

18. Add Icons
Friday, 31 May 13

19. Choose your weapon
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

21. Synchronous, external
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
http://www.fontsquirrel.com/tools/webfont-generator
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

26. Which is difficult if you’ve
added icons...
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

28. Thanks, any
questions?
Friday, 31 May 13