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

James Bruce 25-03-2012

google web fontsFont 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.


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.

google web fonts

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.


free fonts google

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.

free fonts google


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

free fonts google

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.

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


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.

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

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.

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

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.

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

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 Top 5 Sites To Learn CSS Online Read More ; and my own 5 baby steps in CSS tutorial 5 Baby Steps to Learning CSS and Becoming a Kick-Ass CSS Sorcerer CSS is the single most important change webpages have seen in the last decade, and it paved the way for the separation of style and content. In the modern way, XHTML defines the semantic structure... Read More ), 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.

google web fonts


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.


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.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Anonymous
    June 5, 2015 at 10:12 am


    Respectfully, I am wondering just a bit, .. were you mercilessly picked on when you were younger.

    If yes, I'm sorry you had to experience that, but you of all people should have developed a sense and sensitivity toward that sort of thing.

    If no, I'm not sure what to say, and I think that is due to the fact that I don't live in nor do I focus on that sort of thing or energy or whatev.. I do not have an internal trigger that compels me to correct things or spelling or grammer or people. Your double entry is rather classic actually. Many in the study of mental health will have much to debate over your submission.

    carry on..

    notice I didn't say, as you were.

  2. Christoph
    May 20, 2012 at 12:54 pm

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

    • muotechguy
      May 21, 2012 at 7:59 am

      Thanks; fixed.

  3. Marianna
    April 24, 2012 at 6:39 pm

    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...?

    • muotechguy
      April 25, 2012 at 8:26 am

      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?

      • Marianna
        April 25, 2012 at 4:20 pm

        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.


  4. Doc
    March 26, 2012 at 9:06 pm

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

  5. Doc
    March 26, 2012 at 9:04 pm

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

    • James Bruce
      March 27, 2012 at 7:23 am

      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.

  6. Ankur
    March 26, 2012 at 3:20 pm

    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.

  7. Dom
    March 26, 2012 at 1:12 pm

    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.

    • James Bruce
      March 27, 2012 at 7:24 am

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

  8. beezy
    March 25, 2012 at 8:17 pm

    I want to build my own font. how to?

    • muotechguy
      March 26, 2012 at 7:45 am

      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:

  9. Alexander Kenter
    March 25, 2012 at 7:11 pm

    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...

    • James Bruce
      March 26, 2012 at 7:47 am

      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.