When designing and developing a website it is important to choose a font that is both attractive, easy on the eye and easily readable. Thankfully Google Fonts have a selection of over 915 fonts for you to use for your projects. So lets get started.

In this tutorial I will create a simple web page where I will use one of Google’s most famous fonts called “Roboto”. First what we need to do is to create our .html web page and a simple .css stylesheet, so lets begin.

Open your favorite text editor and create a new .html page called mywebpage.html and insert the following html.

<!DOCTYPE html>
 
<html>
     
<head>
     
<meta charset="utf-8">
     
<meta http-equiv="X-UA-Compatible" content="IE=edge">
     
<title>My First Webpage Using Google Fonts</title>
     
<link rel="stylesheet" href="mystylesheet.css">
                                      
</head>
     
<body>
         
<div class="wrapper">
     
<h1>Webpage Title</h1>
     
<p>This is a short paragraph to demonstrate the awesome power of Google Fonts.</p>
     
</div>         
     
<div class="copyright">Copyright 2019 Webpage.</div>       
     
</body>
     
</html>

Next we want to create our .css and call it mystylesheet.css and insert the following code below. In our .html file above I have already linked the .css to our page. You just need to make sure both files are in the same folder.

body {
    text-align:center;
}
.wrapper {
    margin: 0 auto;
    width: 600px;
    padding: 10px;
}
.wrapper h1 {
    font-size:30px;
}
.copyright {
    font-size: 14px;
    font-weight: bold;
}

Now that we have our .html and .css files created we are now ready to select our font from https://fonts.google.com.

Getting Started with Google Fonts

Upon entering Google Fonts you are presented with the page above. On the left you will see a sample of some available fonts, Roboto (which we will use), Sarabun, Aleo and Open Sans.

On the right hand pane we can select from Serif, Sans Serif, Display, Handwriting and Monospace. Each selection presents different styles of fonts which can be used, the most popular styles for easy reading would be Sans Serif in my opinion.

So now that you are familiar with the layout of Google Fonts lets get started by selecting Roboto font by clicking the red button at the top right of the Roboto frame.

Getting Started with Google Fonts

After pressing the red button you will see a notification below saying you have 1 family selected.

Getting Started with Google Fonts

Now that we have selected our Roboto font it is time to customize its options before we implement it onto our web page. To continue press the white En dash to the right of 1 Family Selected as seen below

You should now see a pop up box with an array of options, this is where we will make our final customization’s before heading back to our .html and .css files.

Getting Started with Google Fonts

Above we have various options such as Embed & Customize using standard embed code which gets embedded into our <head></head>of our .html file or @import which can be embedded in either the .html or .css file.

Standard embed solution
@import embed solution

I personally like to use the @import as I like to embed directly into my .css file so the fonts are loaded along with the rest of the styles in the document. I also like to keep the <head></head> in the .html file to the minimum.

Now it is time to embed our code which will make our fonts appear on the web page that we created earlier. Firstly lets open our .css file and embed the following code:

@import url('https://fonts.googleapis.com/css?family=Roboto');

To the very top of the document, it should look something like this:

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
    text-align:center;
}
.wrapper {
    margin: 0 auto;
    width: 600px;
    padding: 10px;
}
.wrapper h1 {
    font-size:30px;
}
.copyright {
    font-size: 14px;
    font-weight: bold;
}

Now that we have inserted the link to the font styles we can now add the font rule to the body {} tag which will target all text on our .html web page. Insert the following:

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

To the body {} tag within our .css stylesheet. It should look exactly like below:

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
    text-align:center;
    font-family: 'Roboto', sans-serif;
}
.wrapper {
    margin: 0 auto;
    width: 600px;
    padding: 10px;
}
.wrapper h1 {
    font-size:30px;
}
.copyright {
    font-size: 14px;
    font-weight: bold;
}

Now when we launch our mywebpage.html file we should have something that looks like this with our Roboto font as our text.

See the Pen Google Fonts by Shane Walsh (@technicalshane) on CodePen.0

By adding the Roboto font property to the body style within our stylesheet we target the whole document.

If you want to use a different font in a different area of your web page then all you have to do is repeat the above and add the required font family to the required css style such as the H1 Title. See the example below:

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Lobster');

body {
    text-align:center;
    font-family: 'Roboto', sans-serif;
}
.wrapper {
    margin: 0 auto;
    width: 600px;
    padding: 10px;
}
.wrapper h1 {
    font-size:30px;
    font-family: 'Lobster', cursive;
}
.copyright {
    font-size: 14px;
    font-weight: bold;
}

In this example I added the font Lobster and styled my H1 tag with that font.You will end up with something like this below:

See the Pen Google Fonts 2 by Shane Walsh (@technicalshane) on CodePen.0

So as you can see it was fairly easy to get started using Google Fonts. I hope you found this tutorial useful.