Google Fonts is one of the best, open-source web font providers, containing an incredible library of completely free typefaces that you can easily plug into your website. However, using them irresponsibly can lead to slower page loads and a jarred user experience while waiting for fonts to render.
Here are some best practices for using Google Web Fonts efficiently on your next project.
Use only the character sets you need.
A handful of Google fonts provide great language support, but in most cases, you’ll only need the language you’re working with. In our case, we use the Latin character set for English. For example, we use Open Sans on our website, which has support for 20+ languages and comes out to 217kb. Fortunately, the Latin character set is only 36kb!
<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet" />
Furthermore, try not to choose too many font weights, as that has a heavy impact on page speed. We typically choose three font weights (300/light, 400/regular, 700/bold) for most of our projects, which we find creates enough typographic contrast.
A Step Further
Are you only using a font for a single word? Google Fonts allows you to pick just the characters you need. For example, if you only needed the letters from the word ‘AGENCY’:
<!— indicate the letters required in by appending ‘&text=‘ —>
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=AGENCY" rel="stylesheet" />
Save the CSS and Fonts on Your Server
Google Fonts lets you download the fonts and related CSS locally. By adding the CSS to your own stylesheets, you can remove an unnecessary render-blocking HTTP request. In addition, hosting them on your own server allows you to apply GZIP compression to the EOT and TTF formats of the font, since they are not compressed by default.
You can do this by going to the link that Google provides for the stylesheet, downloading the fonts locally, and using the Font Squirrel Webfont Generator to generate the necessary file types to make your font work on the web, including WOFF/WOFF, EOT, and SVG.
Advanced: Use base-64 encoding
Adam Beres-Deak describes how to convert a font into a base-64 encoded CSS file and use localStorage to ensure that subsequent requests for this font don’t go to the server. Instead, requests are made to the user’s localStorage after their first visit to your site.
The best thing about this method is that the WOFF formats of your font are sourced directly in your CSS, which means less HTTP requests! This method also uses the Font Squirrel Webfont Generator, which lets you choose only the character sets you need.