How To Use Google Fonts In Your Next Web Project & Why You Should

Font choice is an integral design decision on any website, yet most of the time we’re content with the same old serif and sans-serif family. While the main body of text should always be something optimised for readability unless you want readers to get a headache, titles and standout text can be your space to add a unique design with some font flair.

Background

With CCS, you can specify a chain of fonts to use if the preferred one isn’t available. This allows you to have a first choice – perhaps a less common but free font; then have backups in place that will always be there with Windows or Macs. Generally though, web designers will stick with tried and tested font family chains, as outlined by w3 schools.
In the past, if a different font was desired, designers were forced to create images for the text instead – logo, headers etc. The downsides there being:

• Images don’t scale up well.
• Images aren’t readable by screen readers.
• You can’t highlight the text in images.
• Search engines can’t “read” images.
• Image loading slows down the webpage.

So is there a better solution? One that lets us use a universally available set of free fonts, without resorting to images?

Google Web Fonts

The answer comes from Google. Google Web Fonts is essentially a collection of (at current count, 489) optimized fonts stored in the cloud, that can be embedded into your web projects (or even just downloaded to use on your computer).

Moreover, the Google Web Fonts site makes it easy to compare and choose, then gives you all the code you need to embed the font via Javascript or CSS – more on that later.

 

Getting Started

Head over to the Web Fonts site, and click start choosing fonts to begin.

 

The interface is fairly self explanatory – on the left you can search for specific keywords; and filter by basic font type; or filter for specific factors such as letter thickness. The bar on the top adjusts the preview text only. If you have a specific paragraph of text you want to test it on, for instance, switch to the paragraph tab and paste in your text.

 

As I mentioned, you’re better off not choosing anything too fancy for the main content text, so stick to either serif or sans-serif families if you really want to go for something unique there.
When you see one you like, just add it to your collection.

 

Click the review button to enter review mode and compare all of your choices.




    

In review mode, you’re shown a variety of font sizes and either a paragraph or headline text. The system will also make an intelligent choice about which to show you depending on the typical use case of that font; but you can change the preview mode if you like.


     


Scroll right to see other fonts in your current collection; click the X at the top right to reject them.
Test Drive is a particularly interesting mode that will combine all of the fonts in in your collection to show how it might look when combined on a basic page layout.


     

 

OK, Chosen. How Do I Use Them?

With your collection narrowed down, click the review button on the large blue bar. If you’ve gone overboard and included too many (really, keep it to 2 at the maximum), the page load impact indicator will warn you.


Scroll down to grab the relevant code. There are 3 choices here:

• Standard (link rel= method): this needs to be pasted into the HEAD section of your site, so you’ll need to be comfortable with HTML to do this. For WordPress, you’ll be adding it to header.php if you choose this way. I don’t recommend it.
• @import: this method goes directly into your stylesheet file, which is where we’ll be specifying the fonts for various page elements anyway, so personally I recommend this. For WordPress themes, place it in style.css just after the theme information section
• Javascript: self-explanatory – place the code anywhere in your theme. The benefit of using this method is that the font will be loaded asynchronously – the site will first be displayed in the fallback font, then will switch once the font has fully loaded. Though initial page load time will be faster, it will create a jarring sudden change for the user which you may not want.

     

That’s step 1. Step 2 is to specify the font where you want it used. We don’t have room for a full CSS tutorial here (I suggest these 5 CSS learning sites; and my own 5 baby steps in CSS tutorial), but suffice to say you’ll be adjusting anything in your stylesheet that says font-family, and be sure to include the backup style as suggested by Google.




   

Optimized

Using a non-standard font that the user needs to download is going to add a small amount of time to your page load – that’s inevitable. However, a typical web font from Google is about 100KB – for comparison, this is about the size of a good quality medium-sized jpeg image. Like images, the web font will be cached in the user’s browser, so only the initial page load will be slightly delayed.

Summary

I admit it – I really love fonts. I expect like many of you, I tend to horde them on my hard disk – just in case, you know?! Now I can actually make use of some unique fonts in my web projects – I’m excited. Please, don’t neglect the fonts on your website!
If you have any questions about implementing web fonts on your website, feel free to ask in the comments and I’ll see if I can help.

 All images and original post heare