Add Google Fonts to your Webpage

One of my favorite ways to add unique fonts to my websites is to use Google Fonts. Adding fun fonts to a website can be the difference between an average website and a super unique one!

Google Fonts is a tool that web developers can use to explore and find amazing fonts to use for their websites.

In this tutorial, we will be going from this:

To this:

Using Google Fonts!

What are Google Fonts?

You can access Google Fonts at www.fonts.google.com. Google Fonts has hundreds of unique styles, shapes, thicknesses, etc – perfect for the developer looking to design an aesthetically pleasing site!

I love using this tool because you can search by categories: serif, sans-serif, handwriting, monospace, etc. You can also search by thickness, slant and width! It’s awesome!

Let’s look at what to do once you’ve picked the font(s) you want to use!

Selecting Your Fonts

For this tutorial, we will be using ‘Indie Flower’. It’s a fun, whimsical font, and I thought it looked adorable!

Once you’ve chosen one(or multiple) font(s), select the ‘+’ icon in the top corner of the font box.

This will add it to your Fonts Selected List.

If you see more than one font that interests you, feel free to add it to the list! Just remember – adding in too many font may slow your website load time.

Google Font Code

Once you’ve selected your font, you will see bits of code that will help you to embed the font to your site!

We will start with the first piece of code: embed font.

Embed Google Font Code

To start, highlight the line of code under Embed Font. Then copy it. It should look something like this:

This font will go in the <header> section of your webpage. I already have a piece of code in my <header> that links my html file to my stylesheet, but I can add my new piece of embed font code right below!

Because I’ve copied my code from Google Fonts Embed Code – I can paste it directly into my HTML file in the <header>!

And that’s all you will need in your HTML file! Super simple!

Access Google Fonts

Now that we’ve embedded our Google Fonts to our HTML file, it’s time to use them for styling!

In this example, I will be styling my class =”header” with the Indie Flower font. Let’s take a look at how it’s done!

In Google Fonts, highlight and copy the Specify in CSS code. This is how we will select this font in our CSS Stylesheet!

Next, head over to your CSS Stylesheet and paste the code in whichever element you are styling.

In my case, I am styling class=”header”.

Then, save both your CSS and HTML files! Time to view it in your browser and see how great it looks!

Before:

And After!

Bonus: Some of my favorite Google Fonts:

Giving me Game of Thrones vibes!

What are some of your favorite Google Font combinations?! Comment below!

Don’t forget to subscribe to Tech Talk Code! We publish one new post a week!

Leave a Comment!