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

featured webfonts   How To Use Google Fonts In Your Next Web Project & Why You ShouldFont 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.

Read on to find out how to use any of the Google Web Fonts on your site.

Background

With CSS, 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) optimised 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.

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

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.

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

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.

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

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

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

Check out more about:

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

16 Comments -

0 votes

Alexander Kenter

Correct me if I’m dead wrong, here, or maybe I didn’t properly read this… But why wait for Google? Since CSS3 it’s been possible to use any font you desire using the @fontface syntaxis. It needn’t even be free fonts (make sure you don’t violate any copyrights, though). And, okay, so IE gives trouble and requires some workarounds in you stylesheet, but hey, what’s new in that? Nah, I refuse to be Google dependend, I’ll stick with CSS3 and XHTML…

0 votes

James Bruce

Sure you can, but (a) thats CSS3 and as you say, some browsers just suck, and (b) this is a great way to select the fonts and not host them yourself, as well as avoiding legal concerns. Google also gives great instructions on how to use it on your site along with a variety of options to embed.

0 votes

beezy

I want to build my own font. how to?

0 votes

muotechguy

Kind of off-topic, and I’m afraid I wouldnt know where to start. Perhaps another reader can help you out here, though I suggest you ask this in the MUO Answers section instead: http://www.makeuseof.com/answers

0 votes

Dom

I actually tried using Google Fonts for a current project yesterday (just before reading this article!
It is a really easy to use collection, with some really great font included.
One nice advantage for me is in terms of page speed, if a different site has used the same font which a user has been on it will be cached and they will not have to re-download it.

0 votes

James Bruce

Your point. Better than hosting yourself, because like loading jquery from google repository, it is then cached for every website.

0 votes

Ankur

Google Fonts is great initiative. Finally, no more boring fonts which bloggers were forced to use. Best part is, the no. of fonts are increasing everyday.

0 votes

Doc

“Images aren’t readable by screen readers.” Yes they are – just specify alt=”text” and title=”text” tags for the image.

0 votes

James Bruce

Which of course depends upon how accurately or if at the creator adds them. My point is – actual images are not readable. It may be a picture of a cat, with alt text of “dog”. The image itself cannot be machine-read.

0 votes
0 votes

Doc

“I tend to horde them on my hard disk” I think you probably mean “hoard.” :)

0 votes

Marianna

I’ve used a google font for a webpage made by a coder. The font looks great on a Mac but awful on a PC. Is this because the font is a Mac font (somehow) and not universal? But then why would google make a font that isn’t universal…?

0 votes

muotechguy

No that’s not right, the whole point is that the font is downloaded from Google servers and looks the same cross-system. More likely the Windows user is using an ancient browser or something standards incompatible (read: any version of Internet Explorer); or they are blocking Javascript.

Do you have a URL where I could test for you?

0 votes

Marianna

Thanks for replying!

In talking to my coder, we’ve realized it looks awful in IE, but it also looks awful in Chrome, AND Firefox on a PC. Further research told us that some Google fonts are “just like that” and that we’d best pick another one. Which is the easiest thing to do at the moment.

Thanks!

0 votes

Christoph

Your link to W3C in the third paragraph points to w3schools which is something completely different.

0 votes

muotechguy

Thanks; fixed.