4 Expert Tips for Getting the Most Out of Google Fonts

Google fonts has been with us for almost five years now. If you work with web front-ends, there is every chance that you have used the service in at least one of the websites that you developed.

While the licensing costs have remained zero, the font library has steadily grown in both number and quality, with Google handling both the copyright and infrastructure issues at once. What's more, implementing Google fonts requires minimal work on your part as Google's magic servers handle many of the trickier issues we used to have to manage ourselves.

We probably take it for granted, but it's easy to forget how difficult, hacky and expensive it used to be to use custom typography on your site. Read up on 'sIFR' if you want a quick reminder of what we used to go through.

Having access to such a useful resource, it makes sense to get the most out of it. In this article, I'd like to discuss four tips that you can follow to use Google fonts like a pro.

Tip #1: Request Multiple Fonts in a Single Request

Using different fonts in heading and paragraph text can often improve readability. However, we also know that requesting many small files from a server is significantly slower that requesting one large file.

So, instead of requesting each font separately, it's advantageous to combine those multiple font requests into one. As an example, let's say you wish to load two fonts — Lato and Raleway. The proper way to load the fonts would be:

<link href='http://ift.tt/1MOOmxj; rel='stylesheet' type='text/css'>

Though this does not reduce the total bits requested, the number of HTTP requests is reduced, which can significantly improve page load time. The more fonts you have, the bigger the saving – though there are good aesthetic reasons for limiting the number you use.

Additionally, the code is more concise and readable. You only need to look at one line to understand all the fonts that your webpage is requesting.

Specifying Font Styles and Script Subsets

There are times when you may want the italic or bold version of a font. In situations like these you can specify the font style using i and b respectively after the font name separated by a :. Here is an example:

<link href='http://ift.tt/1Gt7JiT; rel='stylesheet' type='text/css'>

You can also use bi to load a bold italic font style if available.

If you want a different variation of a bold font you can use a numerical weight. Raleway, for example, has four versions of bold with weight 600,700,800 and 900. To request the ultra bold font you need to write:

<link href='http://ift.tt/1MOOpsP; rel='stylesheet' type='text/css'>

If you are not comfortable with the abbreviations you can also specify the full name for a font style, as I've done in the next example:

<link href='http://ift.tt/1Gt7Mej; rel='stylesheet' type='text/css'>

In this case, instead of loading a normal italic font, we are loading the light version.

Some fonts in the directory support multiple scripts like Latin and Greek. One example of such a font is Roboto Mono. To request the Greek subset of the font you can use the following URL:

<link href='http://ift.tt/1MOOmxl; rel='stylesheet' type='text/css'>

Optimizations

In specific situations, you might need to use only a strictly limited set of characters from a given font. This may also be the case when you only require the digits from a given font.

In cases like this, it's simple to reduce the request size by cherry-picking the specific characters we need by using thetext= value in your font URL. This way Google will return the version of the font file you requested optimized for your specific needs. This can dramatically reduce the file-size of the font that is supplied.

Consider the following example:

<link href='http://ift.tt/1Gt7Mel; rel='stylesheet' type='text/css'>

Instead of loading the complete Raleway font file, we only load the characters we need for 'SitePoint'. This reduces the request size and, as a result, the webpage loads a little more quickly. These optimizations can add up and have a significant impact on the overall load time of a webpage. Keep in mind that you need to URL-encode the value of text.

Continue reading %4 Expert Tips for Getting the Most Out of Google Fonts%

by Monty Shokeen via SitePoint