Connect with us

The proper way to use Google Fonts on your website

blogging

The proper way to use Google Fonts on your website

If you want to make your website more attractive, you have to choose a well-formatted font. Basically, typography plays a huge role to impress anyone by the overall website design. Your chosen theme may offer great UI, but without using a well-balanced font, it will not make any special sense with the layout. In others words, it will represent the whole UI and UX of your website. Today’s web highly depends on web fonts for these typographical solutions. And Google Fonts is the king of web font for many years now. In this post, we are going to discuss what Google Fonts is, how to find the best fonts among the sea of fonts and of course, the proper way to use Google Fonts on your website.

There is no doubt that content is the best thing that will attract your reader. It can make reliable visitor. Similarly, it will increase sales of your product or services. For this reason, your duty of making your web content good looking and visually impressive is just as important as ensuring good quality content. A good web font-face can meet your criteria. Therefore, we know a quote like ‘First attract with your appearance, then comes the need of quality.” In reality, a web font can work both the facts.

What is Google Fonts:

Google web font is popularly known as Google Fonts now. Firstly, Google launched it in 2010. In 2011 Google rearranged and reformatted the font with new looking and outstanding view. Google releases all of their fonts under  SIL Open Font License 1.1 and Apache License. Both of them are under free software licenses. Another key point, Google has released over 800 web fonts till now. All of the fonts are available in Google fonts websites. Similarly, you can also access the font from the GitHub repository.

Advantages of Google Fonts:

Though you will find a lot of fonts available on the web, But Google Fonts has achieved the soft corner of the webmaster. Similarly, their popularity is increasing day by day. Let’s take a look at the advantages of Using Google Fonts.

  • 1. It’s totally free to use:

One of the best facilities of Google Web Font: It’s free of charge. You may get a lot of beautiful font like Sofia Pro. It will cost $250 for using their 12 fonts only. On the other hand, if you want to use only one, it may charge you $25. It’s not good for all. Sure, Premium Font makes your website more attractive. But Google Fonts will get you going just fine without having to count bucks.

  • 2. No tension for license:

Google web fonts are published under SIL Open Font License 1.1 and Apache License which is open source. So, you can use it any of your sites for any reason. You have no bindings to use it for any of your projects. Furthermore, you can use it for commercial, printing purpose or multiple sites.

  • 3. Compatible with Cross-Platform:

Many web fonts never support Cross-Platform. So you have to worry about it. In Google Web Fonts you have no tension about thinking about that. Important to realize, Google Fonts support all kinds of browser and devices. Even it supports Android 2.2+ and iOs 4.2+ versions. On the other hand, Google provides dedicated CDN (Content Delivery Network) to manage the fonts. In other words, you don’t need to worry about cross Platform compatible issues.

  • 4. No limitation for Using:

Google web fonts have no bandwidth limit to use it. Without any requirement, you can use it for unlimited websites. Similarly, It offers billions of page view in a month. On the other hand, TypeKit (Another font services) provide only 500k page views in a month including license fees.

  • 5. Loads faster:

Google web fonts load very faster than anyone.By all means, with unlimited Bandwidth and lightweight fonts, it can load very faster. To point out Google describes, “You should not think about loading time of the Google Fonts”.

  • 6. Easy to download:

Unlike others, Google Fonts have no bad issues when you are downloading it. As it is lightweight, you can download it very easily. Even it won’t affect the font quality.

  • 7. Massive Cost Savings:

You already know that Google Web fonts are totally free. Similarly, it can easily run with the premium one. So, you have no pressure for font quality as well as charge. For this reason, It will save you some extra cash.

How to find and choose your desired Google Fonts:

For accessing 800+ Google web fonts, just visit the Google Fonts website. Similarly, if you want to choose the right font for you, follow the below 3 steps.

1. Firstly, Choose a Font from the directory. You can see the live preview with the real-time overview. You can also search for your desired fonts from the top right corner of the screen.

2. When you have chosen one, tinker with it to be sure that this is the perfect one for you. You can increase or decrease to font size using the slider, You can write any text in place of the sample text to preview as well!

Proper way to Use Google Font

When you are absolutely sure about font choosing, hover over the directory and click on the red plus sign that says “Select This Font”. Then From the pop-up window, you can easily customize the font with your needs.

3. Finally, from the import menu, you will find the code (embed or CSS) of the font. You can copy it and use it in your websites.

Proper way to Use Google Font

Most popular google Web Font Collection:

You can check the listed font before choosing one for you.  They are immensely popular among users.

Playfair Display, Open Sans, Josefin Slab, Arvo, Rubik ,Chivo, Lato, Vollkorn, Abril Fatface, Ubuntu, PT Sans + PT Serif, BioRhyme, Old Standard TT, Droid Sans, Anivers, Junction, Fertigo, Aller, Audimat, Montserrat, Delicious, Prociono, Fontin, Fontin-Sans, Chunkfive.

The Proper way to use Google Fonts on your website:

I will show two methods for Adding Google Fonts to your website. One for any websites and another for CMS like WordPress.

  • 1. Adding web fonts to your website Properly:

You can install Google Fonts in your website just like others. Firstly, you have to choose one font from the Google Fonts site for using it to your website. Then add it to your collection or you can only generate the code to use it.

  • Now add the generated code in the <head> section in your website. For example:
<head>   
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>
</head>
  • Now you are able to access the code from your stylesheet (CSS code) using the normal ‘font-family’ property. Like this:
body
{       
font-family: ‘Tangerine’, serif;       font-size: 48px;     
}

I have just used a font for describing the method. You have to generate and use your own font.  

  • 2. How to add Google Fonts in your WordPress Websites:

Adding Google Web Fonts in WP is very easy. You can add Google Fonts in Your WordPress Websites using three methods.

  1. By adding the code in WP Function.php
  2. By adding the code in style.css
  3. Using a plugin

How to add Google Web Fonts by WordPress Function.php:

Generally, it is the best way to add Google Fonts by editing function.php. To do this You have to open function.php file from the Dashboard.

  • Go to wordpress function.php file (WP>Dashboard>Appearance>Editor>function.php) and add the below code bottom line of the file.
  • On the other hand, you can also add the code from cPanel. If you want to add the code by cPanel, you have to add it on the last line of the code in function.php.
function xt_custom_google_fonts()

wp_enqueue_style( ‘xt-font-montserrat’, ‘//fonts.googleapis.com/css?family=Montserrat:400,700’, false ); 

add_action( ‘wp_enqueue_scripts’, ‘xt_custom_google_fonts’ );

Adding Google Fonts by style.css:

If you think you don’t want to add Google Fonts to function.php file. You can do it easily by style.css. You have to go here: (WordPress Dashboard>Appearance>Editor>style.css). You have to add your own font where I have added my own.

body

font-family: ‘Montserrat’, sans-serif; font-weight: 400; 
}   
h1,h2,h3,h4,h5,h6

font-family: ‘Montserrat’, sans-serif; font-weight: 700; 
}

P.S:

  • Where I have used the font URL in the code (in line 3), you have to use it for your desired fonts.
  • Keep a blank page at the end of the line in function.php.

How to add Google Fonts using plugins (Easy methods):

You can add Google Fonts with the help of plugins. In reality, it is the easiest methods to use Google fonts. On the other hand, you don’t need to add any code. You just have to download and install it in your WordPress website.

Hope you will understand the method very fine.I have collected Two plugins for adding Google Fonts. Similarly, it’s the most downloaded and used font plugin in WP.

To add the typography of Google you can use this plugin. WP Google Fonts is actively installed in 1,00,000+ websites. On the other hand, it is the most popular and user-friendly plugins to do the work.

How does it work? You have to download and install the font. After activating you have to customize it only. From the setting, you can easily customize the font with your needs.

Important to realize, the plugins is totally free. So you can easily add your desired font from the directory.

Easy Google Fonts is an another WP Plugins to do the same work. It’s also very popular and user-friendly plugins in WordPress to add Google Fonts.By this plugins, you can easily control the looking with the real-time view. You have no need to write a single when using it.

Similarly, activating process is same like WP Google Fonts. You have to download and install it. After activating you have to customize it for your needs.

Final Thought:

Google Fonts is very amazing, attracting and affordable compared to other premium ones. As it is free, you can use it unlimited time without any prior notice. Similarly, the fonts are lightweight so it will load faster. So, I think the post will help you with all the things about Google Fonts.

If you found this article helpful for you, You can share this on your social media. For any further technical needs, you can post a comment, We are here to help.

Happy Webbing! 🙂

Continue Reading
Click to comment

Leave a Reply

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

More in blogging

About Me:

Szabi Kisded

Hey there, I'm Szabi. At 30 years old, I quit my IT job and started my own business and became a full time WordPress plugin developer, blogger and stay-at-home dad. Here I'm documenting my journey earning an online (semi)passive income. Read more

Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
(worth 29$)!

All My Plugins In A Bundle:

My AutoBlogging Plugins:

My Online Courses:

A Theme I Recommend:

Featured Posts:

To Top