Pinterest Stumbleupon Whatsapp
Advertisement

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.

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

Advertisement

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 Top 5 Sites To Learn CSS Online Read More ; and my own 5 baby steps in CSS tutorial 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer 5 Baby Steps To Learning CSS & 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

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.

Leave a Reply

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