Services like typekit, fontdeck, and the new Webfonts by H&FJ give web designers options we didn’t have a few years ago — which is great, but it slows down the web.

I hope additional services and the competition between providers will help make web fonts even better and more performant in the future. However, if you care about performance today you should use your best judgement when adding fonts to your web design project, as they come at the cost of your website’s perceived performance and download time by creating additional network requests and bulking up the overall size of your website — which can have a significant impact on mobile website’s performance.

One option I’ve used to increase performance on smaller screened devices when building responsive sites is simply not serving the web fonts to those devices. This makes sense if your project values performance over maintaining a consistent typographical look on both your mobile and desktop sites. It’s not for everyone, but I’ve worked on some projects where there were so many assets being loaded, it just made sense to cut the fonts out to help speed up the site.

You should already be smartly not including styles and weights you’re not going to use, like excluding an italic variant if your using that font just for headings.

So assuming you want to load some fonts conditionally based on screen size, you might initially think of including them through a media query like so:

( media min-width: 620px ) {
@font-face {
font-family: "goudy-oldstyle";
url('webfonts/goudy.woff') format('woff')
}
html { font-family: "goudy-oldstyle", ... ; }
}

While this works for loading fonts from your own server, if you’re using a service like typekit it’s not so simple. This is because typekit requires the fonts be loaded from it’s servers and it’s API accessed via a JavaScript call in the head of your document.

To work around this you can check the width (or some other relavant property) of the browser viewport in the head of the document and then use document.write to load the typekit scripts if your condition has been met. In the head of the document within a “<script>” tag you would want to do something like this:

if ( window.innerWidth > 600 ) {
document.write('<script type="text/javascript" src="//use.typekit.net/your_key.js"?><\/script><script>try{Typekit.load();}catch(e){}<\/script>')
}

The value “600” is arbitrary, but would be the width in pixels of the browser width you’re trying to target. You would want to replace “//use.typekit.net/your_key.js” with your own typekit account key. Again, this technique isn’t for everyone, but it’s a simple way of saving resources if serving fonts isn’t essential for your mobile users.