Looking for something?

How to install and use Google Fonts on your website

The fonts you use on your website can make a huge difference to its overall appearance. 

Just like with colours, there is psychology behind fonts. Fonts can convey certain feelings or moods or vibes. They can help your website and brand to be portrayed as professional, friendly, fun, approachable, trustworthy, welcoming, luxurious, etc.

When it comes to choosing fonts to use on your website, not only do you need to choose fonts that look good, you also need to ensure these fonts are “web safe” i.e. will work online on a number of systems and devices.

Operating systems have a number of pre-installed fonts that are safe to use online, such as Arial and Times New Roman, but we all know these fonts are very generic and not exactly exciting!

This is where Google Fonts comes in. Google Fonts is a huge library of over 800 fonts that you can use on your website for free.

In this post I’m going to show you how to install and use Google fonts on your website.

1 | Choose a font

First things first, head over to the Google Fonts website. It looks a little something like this:

Google Fonts homepage | HollyPryce.com

As you will see, there’s lots of fonts to choose from.

On the right hand side of the screen you will see a search bar and some filters. These will help you to find a font for your needs.

If you want to test out a font with a certain piece of text (like your website name, for example), just highlight the example text for that particular font, and replace it with your own text. You can then click “Apply to all fonts” to see what this text looks like with all of the other fonts.

Google Fonts previewing font | HollyPryce.com

To see more details about the font, click on “See specimen“.

Clicking on “See Specimen” will take you to a page that is full of information about that particular font, including the different styles of a particular font that are available, and popular font pairings.

Side note: I also recommend using a website called Font Pair to find Google Fonts that work well together.

Google Font select font | HollyPryce.com

When you have decided on a font that you want to use, click “Select this font” in the top right hand corner of the page. A black box will then pop up at the bottom of the page that says “1 Family Selected“. Click on this box to see all the codes required to use this font on your website.

Google Fonts family selected | HollyPryce.com

2 | Add the stylesheet link to your website

When you open the little black box that pops up after selecting a font, will notice two piece.

Google Fonts codes | HollyPryce.com

The first is a code that links to the external stylesheet for the font you have choosen. You will need to copy this and place it in-between the <head> </head> tags in your HTML file.

If you are using WordPress…

If you are using WordPress, you should enqueue this stylesheet correctly via the functions.php folder. Your code might look a little something like this…

    function theme_files(){
        wp_enqueue_style('google-font', '//fonts.googleapis.com/css?family=Roboto');  
    add_action( 'wp_enqueue_scripts', 'theme_files' );

If you want to use other font styles…

If you want to use other font styles that are available for the selected font, click on the Customize tab and select the font styles you would like to use. Notice how the load time changes as you add more styles.

Google Fonts styles | HollyPryce.com

Once you have finished selecting styles, click on Embed tab to return to the codes and notice how stylesheet URL has updated to include these font styles. Ensure that you use this updated stylesheet URL in your code.

Google Fonts styles code | HollyPryce.com

3 | Add the CSS rule to selectors

The second code in this little black box is the CSS rule required to make this font work. This should be added to all the selectors in your CSS that you want to apply this font to.

For example, if I wanted to make all the <h1> elements on my website use this font, my CSS would look a little like this:

h1 {
    font-family: 'Roboto', sans-serif;

You’ll notice that the name of the font is followed by a fallback font just in case the initial font fails to load. You can add in more fallback fonts if you wish.

If you added other font styles when setting up your font you can use the “font-weight” property to change the thickness and thickness of the text, and the “font-style” property is you would like to make the text italic.

Do you use Google Fonts on your website? Or do you use another font library for your website?

How to install and use Google Fonts on your website | HollyPryce.com

Leave a comment


* = Required. Your email address will not be published.