“Which is the best source on the web for diverse font collections to use on my blog?” If you ask this question to any of the website designers, developers, they yell GOOGLE FONTS, questioning your horse-sense.
Google fonts boast the collection of the best fonts around the web, which can be easily integrated with sites and blogs.
In this post, I’ll show you how to use Google fonts with WordPress.
Let’s get started.
Chances are there, that you are here, you have chosen the font to be used on your site and don’t know how to integrate that font with your site.
If you are here still struggling to find the best font to use on your site, then I recommend you to look at these resources.
Once you choose the best font and combinations to use on your site, search for the font.
Here let me take an example of the font, Josefin Slab.
Now, in the preceding page, you will be presented with the font style selection.
Select the font style that’s great in appearance.
Here, I select semi-bold. Because for a font like Josefin Slab, semi-bold would be great. Normal would be too thin.
Now scroll down.
Here you can come across the code to add to your website. Copy that.
You can also copy the font CSS.
Now you need to head over to the theme files in your WordPress.
Go to header.php
Now search the <head> tag.
Just below the tag, paste in the code that you’ve copied before.
Save the theme file.
Now you’ve imported the Google font to your site. it’s now the time to use it.
This process involves editing your CSS code.
This depends on, whether you are using the font only for your main paragraph content or throughout your site.
Here I’m showing you to change font only of your main content.
Here’s the dirty little hack.
Head over to one of your post. Right click on it. Select inspect element.
Now select the little search icon on the top left corner of the inspect element window.
Select a paragraph in your blog post.
Scroll down the CSS section at the right of your inspect element window.
Here, you can see the CSS associated with your current font.
Edit this. And add the CSS associated with the new font.
Here you can preview the new font on your site.
Now you need to head over to the theme file (most of the times style.css). Search for the old font CSS code and replace it with new font CSS code.
Now save the changes.
Visit your blog. You can notice that the font family of your blog has been changed.
If it has not been changed. It maybe because of cache issues. Only on your browser. You can solve it by force refreshing. (CTRL + F5)
You can follow the same for changing the font of your headings, title, blockquotes, etc.
Just inspect element the portion of the test that you want to change.
This is how you implement Google fonts on your site.
If you have encountered any issues, let me know.
The post How to Easily Use Any Google Fonts on WordPress appeared first on GoBloggingTips.