How To Use Google Fonts On Your Website Or Blog?

Tutorial To Use Google Fonts

There’s a collection of some of the really cool fonts in its Google Fonts gallery. The best part of about Google Fonts is that they’re really fast to load apart from being just good in looks. Most of the times, I’ve seen users downloading the fonts from the Google Fonts website and then using them in their websites. Well, why to do so, when we have better ways of including and using them. That’s this article is all about.

I’ll quickly guide you in this tutorial, how you can make use of Google Fonts in your blogs and websites easily with just a setup that will hardly take 1 or 2 minutes of your life.

Steps To Use Google Fonts in Your Website or Blog

Follow the steps given below to quickly add Google fonts to your site.

1. Go To Google Fonts gallery and choose your desired font by clicking on the Small Circled Add Button, positioned at the Top Right of each font card.

Choose Any Font

2.  You can select multiple fonts in one go and all will be added in your Google Fonts Collection Tab that will appear in the Bottom Right. Simply click on it to view all of your selected fonts.

Google Fonts Collection Tab

3. In this case, we’ve just selected one font and you can see the details in the screenshot given below.

Fonts Manager

I’ve labeled the meaning of different options in the screenshot. As you can see, I’ve selected the Roboto Font and by default, the HTML specific embedded instructions are displayed.

4. Customize the font according to different sizes and styles by going into the Customize Tab as per your requirements.

Google Fonts Customization

5. Now, there are two methods for you to set up Google Fonts for your site. First is the Standard Method and the Second one is the CSS Method. Use any one method to include and use the fonts in your site.

I’ve given the steps for setting up the fonts using both the methods.

Standard HTML Method

Simply copy the link tag given in the Standard Tab and paste it into the <head> tag of your HTML page.

<head>
...
<!-- Other Tags --->
...
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

@IMPORT CSS Method

In the CSS Method, you’ve to import the font using @IMPORT in the CSS file or <style> tag itself.

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>

Most of the times I’ve to use multiple Google fonts, different fonts for different tags. I always prefer importing these fonts using the @import method.

Usage For Different Elements

Make use of the specified CSS according to the selectors of those tags which you want to use that particular Google Font. For example, for each and every tag to use this font, we can use the * CSS selector.

<style>
* {
     font-family: 'Roboto', sans-serif;
}
</style>

As I already mentioned that you can use different fonts for different elements, you have to specify the different font-family properties for different tags.

An example is given below, in which I’ve imported two Google Fonts, one I’ve used for heading tags and the other for paragraphs. I’ve used the CSS specific @import method.

<style>
@import url('https://fonts.googleapis.com/css?family=Lato|Roboto&display=swap');
p {
      font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
      font-family: 'Lato', sans-serif;
}
</style>

Google Fonts & WordPress

Although there are many plugins available for WordPress that can help you in adding these fonts really quick and fast on your WordPress site, instead of using them, I still recommend following the CSS method illustrated in this tutorial. You can simply include the Google Fonts in the custom CSS file that can be edited in the Customizer options provided by WordPress.

The screenshot of the same above example used in WordPress Custom CSS is given below.

Google Fonts In WordPress Custom CSS

This way you can easily use any of the one or more fonts by Google on your website. They load really fast and better than using the fonts uploaded on your web hosting. Hope you found this tutorial as useful and if so do share this guide with others who might find it useful as well. Don’t forget to subscribe to WTMatter for similar useful content and if you’ve any questions to ask for, feel free to make use of the comments section.

Leave a Reply

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