Code

How To Use Google Fonts On Your Website

Tired of using Arial & Times New Roman?

For many years, websites relied on the default system fonts found on PC and Mac computers. If a user wanted to use a sans-serif font on their website, they would have to use a basic font like Arial. If they wanted to use a serif font, Times New Roman would be the top choice. Fonts like Times and Arial, are old faithful web fonts. However, we now have some really awesome free web fonts, thanks to Google Fonts.

It’s time we expand our web font selection so that we can make our website more attractive. In this tutorial, I’ll be showing you how to use Google Fonts on your website or blog. Google Fonts is a great way to incorporate fun, bold, and exciting new web fonts on your website. Plus, the fonts are free to use!

How To Use Google Fonts

It’s super easy. Before you do anything else, head on over to Google Fonts. I’ve broken the process down into four easy steps below:

Step 1: Browse the collection & select a font

How To Use Google Fonts On Your Website via xopixel.com

Select a font that you would like to use on your website by clicking the red “plus” sign (located at the top-left corner). To help narrow down your search, use the right-hand sidebar to help filter out the different fonts styles (i.e. serif, sans-serif) to view only the styles you selected.

Step 2: Select your font styles

How To Use Google Fonts On Your Website via xopixel.com

Once you’ve selected the font(s) you want to use, open the black font family box at the bottom of your browser. Click the “Customize” link at the top of the box.

The various styles for the fonts are listed vertically and each style can be individually “checked” off. To make sure your website loading time is fast, choose only the styles you know you will be using (or just 1-3 styles). Choosing more styles than needed will slow down your website.

Step 3: Grab the embed code

How To Use Google Fonts On Your Website via xopixel.com

 

There are two coding languages that you can use to embed your Google Fonts embedding code: HTML (Standard) and CSS (@Import).

  • Standard – A standard stylesheet link that you’ll place in the <head> of your HTML file. You won’t have to use the @import code to your CSS file because you’re linking the stylesheet from Google’s API.
  • CSS – Use the CSS @import rule shown in the second tab. Remember to place the CSS @import code on line 1 of your CSS document. Tip: If your fonts aren’t showing in all your browsers, try using separate @import codes for each font.

Step 4: Place embed code in your HTML or CSS file

How To Use Google Fonts On Your Website via xopixel.com

Lastly, all you need to do now is place the Google Fonts embed code in your HTML or CSS file. That’s it—you’ve just added Google Fonts to your website!

Now It’s Your Turn!

What is your favorite Google Font? Do you have a favorite Google Font combination? Let’s chat in the comments below.

Like this article?

I'm a Content Creator, Front-End Web Developer, UX Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.