Richard Rutter: Responsive web fonts

Richard Rutter was speaking about Web Fonts at Responsive Conf, these are my notes from his talk.

Web fonts can take ages to load showing no text.

Solutions:

1. Default: text appears as fonts load.
2. Don't send small fonts to small screens.
3. Show text in fallback and swap out as the fonts load.

For number 2: Serve stylesheet for fonts with a media query in link definition.

For number 3: Use the Google web font loader. This gives you html element hooks showing web font loading status. Use these hooks in the CSS to set the font when it's loaded. It also gives you hooks for each individual font as it loads - not just the whole font stack.

Combine 2 & 3 to progressively load on larger screens but keep with defaults for small screens.

You can use CSS to tweak the font metrics to reduce the jump between the default font and the web font.

With the number of different default fonts available across devices then font stacks will get long as you cover the best individual fallback for each operating system.