Welcome to a new WordPress post. Today’s topic is how to use Google Fonts on a WordPress site without any plugins. But there is no reason to worry. You can use the Google font of your choice without any plugin in GeneratePress or any other WordPress theme.
Why not use a plugin for Google Fonts?
We can use plugins or upload fonts to use Google fonts. However, uploading fonts in this way reduces the speed of the site. The site slows down.
When the site is slow, it causes various problems. This also causes a big problem in the ranking. So I think it is better to use HTML code and Additional CSS to use Google Font.
Procedure
Here’s how to use Google Font on WordPress sites without any plugin:
Procedure 1
First, you have to select the Google font you want to use. Visit fonts.google.com to select your favorite Google font.
You will get all the Google fonts on this site. Select the font of your choice from here.
Since I will use English font, I will select English Language
There are currently over a thousand Google fonts.
Below are the top 15 Google fonts –
1. Roboto
2. Open Sans
3. Lato
4. Slabo 27px/13px
5. Oswald
6. Source Sans Pro
7. Montserrat
8. Raleway
9. PT Sans
10. Lora
11. Noto Sans / Serif
12. Nunito Sans
13. Concert One
14. Prompt
15. Work Sans
Of the above fonts, Roboto is the most popular. But personally, I like Lato and Open Sans. Here I will show you how to work with Lato font.
Once you see it, you can work with all the other fonts in the same process.
Notice the image above. Here you can see that there are many font sizes of Lato font. Such as – Regular 400, Regular 400 italic, Bold 700, Bold 700 italic, Black 900. There are some more font sizes. You will see when you check the site. Next to each font size is an option called “+ Select this style.”
You can choose the font size and font style that you want to use on your site. You can only use the ones you select.
If you select one, you can only use one. If you select more, you can use more. In my opinion, it is better to choose more than one. Many times many different fonts are needed.
For example, when we write an article on a blog or website, we use the H1 tag in the article’s title and the H2, H3 tag in other headings. So we need to select at least four to five font sizes or styles.
After selecting the five font sizes of Lato, the block will open like the picture above. In the Selected family option, you will see the option to download the fonts.
Since we will set up Google fonts using HTML and CSS, we need to copy that font’s HTML code. For this, we will click on the Embed option
After clicking on the Embed option, you will get HTML and CSS code of Lato font like the picture above. We will copy the codes. Then we will save HTML code in the WordPress theme edit option and CSS code in the Aditional CSS option.
Procedure 2
HTML code for Lato fonts
First, we will add the HTML code of Lato font to our WordPress site. For this, we will select Theme Header (header.php) in the Editor option from Appearance.
Then we will save the HTML code of our font in the <head> section.
Follow the procedure below –
| > Appearance> Editor> Theme Header (header.php)> Then paste the HTML code of font in the <head> sectionAnd click the Update File button. |
Procedure 3
After saving the HTML code, you need to add the CSS code to the Additional CSS option.
Class name of CSS is different for different themes. Now you may be wondering what is the Class name issue?
The subject can be explained to you with examples.
| body {font-family: ‘Lato’, sans-serif;} |
Notice the table above. Here “font-family: ‘Lato’, sans-serif;” This is the CSS code of our font. And the word body means Class name.
This means that using the body Class name will change the entire font style of our site’s body.
But we don’t just have to change the body font. At the same time, we need to change the font and style of H1, H2, and H3 separately. And for this, we will follow the instructions below.
| body {font-family: ‘Lato’, sans-serif;}h1 {font-family: ‘Lato’, sans-serif;}h2 {font-family: ‘Lato’, sans-serif;}h3 {font-family: ‘Lato’, sans-serif;} |
Even after changing our site’s body and title font, there is still work to be done. Now we need to change the font style of the navigation menu bar on the site.
As I said before, different themes have different CSS Class name. Since I am using the GeneratePress theme, I will use the CSS Class name of the navigation menu of my theme.
| .main-navigation .main-nav ul li a {font-family: ‘Lato’, sans-serif;} |
Notice the table above. The CSS Class name in the navigation menu bar of the Generate Press theme is “.main-navigation .main-nav ul li a”.The rest of the second bracket is the CSS code of the font.
In Additional CSS, we will save the CSS code with Class Name. Follow the process below –
| Go to WordPress Dashboard > Appearance > Customize > Additional CSS |
Conclusion
Hopefully, you can use Google Font on your site without any plugin if you follow the procedure correctly.
However, if you face any problem, let us know. We will try to solve it.Thank you.
