The gorgeous website for this year’s Ampersand conference might well be one of the first commercial uses of variable fonts in the wild. Here, Richard documents all the clever things Mark did to ensure good fallbacks for browsers that don’t yet support variable fonts.
Friday, January 26th, 2018
Thursday, September 14th, 2017
The reality is transpiling and including polyfills is quickly becoming the new norm. What’s unfortunate is this means billions of users are getting trillions of bytes sent over the wire unnecessarily to browsers that would have been perfectly capable of running the untranspiled code natively.
script type="module" and put your transpiled fallback in
Most developers think of
<script type="module">as way to load ES modules (and of course this is true), but
Sunday, August 20th, 2017
Everyone’s been talking about
font-display: swap as a way of taking the pain out of loading web fonts, but here Chris looks at
font-display: optional and
font-display: fallback as well.
Saturday, February 25th, 2017
A nice look at the fallbacks that are built into CSS.
Sunday, June 26th, 2016
This ongoing series about the nuts’n’bolts of implementing Service Workers is really good. This one is great for getting to grips with the cache API.
Tuesday, June 9th, 2015
An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.
Wednesday, February 18th, 2015
Smart thinking from Sara on providing a PNG fallback to browsers that don’t support SVG. Although, actually what I like about this solution is that it’s less about providing PNG as a fallback, and more about treating PNG as the baseline and SVG as the enhancement (an approach that the picture element is perfect for).
Monday, August 19th, 2013
Alas, that clever SVG fallback trick I linked to a couple of days ago has some unexpected performance side-effects.
Friday, August 16th, 2013
A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.
Thursday, April 21st, 2011
A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.