Preventing the Performance Hit from Custom Fonts
Only load on large screens
The first idea I saw was Dave Rupert’s tests on only loading @font-face on large screens. Turns out if you use @font-face but don’t ever apply that font-family, the font won’t be downloaded. Pretty smart, browsers. Dave’s demo.
<span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Dr Sugiyama'</span><span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">;</span> <span class="token property">src</span><span class="token punctuation">:</span> <span class="token function">local</span><span class="token punctuation">(</span><span class="token string">"Dr Sugiyama Regular"</span><span class="token punctuation">)</span>, <span class="token function">local</span><span class="token punctuation">(</span><span class="token string">"DrSugiyama-Regular"</span><span class="token punctuation">)</span>, <span class="token url">url(http://themes.googleusercontent.com/static/fonts/drsugiyama/v2/rq_8251Ifx6dE1Mq7bUM6brIa-7acMAeDBVuclsi6Gc.woff)</span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"woff"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Dr Sugiyama'</span>, sans-serif<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>