You Are Here : Home » , » How to Add Google Web Fonts on Blogger Blogs

How to Add Google Web Fonts on Blogger Blogs

Fonts can change the overall look of a site and it can make your blog look awesome. By default, Blogger doesn't provide you too many fonts to use. Also, you can only use the built in designer tool to change the fonts and style of the Templates which are designed by or available in Blogger. It means you will not be able to change the font if you use 3rd party templates. Most of the users use another third party Templates on their Blogger blogs as their isn't so many templates to choose from the list. If you use default templates than you will notice that their isn't so many good numbers of fonts  In this post I will tell you how to change and customize the font style of your blog with Google Web Fonts.

How to Add Google Web Fonts on Blogger Blogs

All the fonts are hosted in the Google's server, which means you'll rarely notice any down time. For you to customize the fonts, you'll first need to choose your font from the Google Web Fonts page and after that you have to find the element ID of the title or post body in which you want to use these fonts. Don't Worry if you don't know how to do all these things as I will explain all these things in detail. Just keep reading.
  • First go here and choose the font you like the most. You can use the search box in the left of the Google web font page to find your font.
  • After choosing your favorite font (or fonts), click on the Add to Collection button.
How to Add Google Web Fonts on Blogger Blogs
  • After adding the font your collection, click on the use button from the bottom right of the page. See the image below to know more.
How to Add Google Web Fonts on Blogger Blogs
  • After clicking on the use button, you'll be on the final step of choosing your font from Google Fonts list. On this page you will see an odometer which will display the fonts impact on page loading time.
How to Add Google Web Fonts on Blogger Blogs
  • If it the odometer doesn't shows too much impact on the page loading time than you can use this font with disturbing your page loading speed.
  • To use this font, scroll down and after that you'll see codes something like the one show below in the image.
How to Add Google Web Fonts on Blogger Blogs

  • After copying the code, sign in to your Blogger account and choose the blog in which you want to use this font.
  • Now navigate to Blogger Dashboard > Template. In the template page you can see the live preview of your blog. Click on the Edit HTML button.
  • Now click anywhere in the template code and press CTRL+F to open the Blogger search box and search for the following code.
<head>
  • Now add the code which you copied from the Google Web Fonts page just after the <head> tag. In the example I am using the Open Sans font. You can see the code for the Open Sans font given below.
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  • Take a sharp look at the above code. In the above code or the code you choose from the Google fonts list, you will need to add the slash sign (/) just after the type='text/css'  in your font code. After adding the slash sign the code will look something like below.
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
  • Now after modifying it you can add the modified code after the <head> tag in your Template HTML.
How to Add Google Web Fonts on Blogger Blogs

  • Now save your Template. Wait! You have only added the Google Font in your Blogger blog. Now you will need to specify where to use that font.
Now go again to the Google Font final page. At the little bottom of the page you will see the code something like the one shown in the image given below.

How to Add Google Web Fonts on Blogger Blogs

We will need the code given above. Your code will be different depending on the font you choose.
  • Go again to the Template page of your Blogger blog and click on the Edit HTML button. Now search for the following code in your Template.
]]></b:skin>
  • Just before/above the ]]></b:skin> tag, add the following line of code.
h1 {
font-family: 'Open Sans', sans-serif;}
Note: You will need to change the code (name of the font family) in red with the one which you get in the fourth step of the Google Fonts final step. Just replace "font-family: 'Open Sans', sans-serif;" with the code you got from Google Fonts and add it to the specified area of your Template.

Also, please note that the above code will change the font family of all the h1 heading tags of your blog. If your blog don't use H1 tag on your post title than change it to h2 or h3 or h4 etc.

If you would like to change the font family post area or only the post than use the following code.
.post {
font-family: 'Open Sans', sans-serif;}
Change red text as explained above. The above code will change the font family of the post area only. If using the above code  doesn't make any changes in your blog post than your template might be using another element name for the post body. In this case you will need to find the Element Name/ID used for the post area. You can use Inspect Element feature of Google Chrome to find the Element Name or ID.
  • Just go to your blog from Google Chrome and press F12 key.
  • After that click on the search icon located in the top left side of the Inspect Element tab. See image below.
How to Add Google Web Fonts on Blogger Blogs
  • Now you can easily find the element name of the post area. Just hover your mouse on that area and than note down the ID or Element image that shows up.
After getting your post element name or ID, use the code given below to change the font family.
.ELEMENT-NAME {
font-family: 'Open Sans', sans-serif;}
Replace ELEMENT-NAME with your posts element name and change the texts given in red as explained above in this tutorial. Don't forget to put a dot/ full stop sign before element name in the code.
If you would like to change the font of your Widget with Google Fonts than take a look on How to Find Blogger Widget ID and Section ID. After knowing the widget ID, use the code given below to change the font family of your widget.
.WIDGET-ID {
font-family: 'Open Sans', sans-serif;}
Just replace WIDGET-ID with your blogs widget ID and code given in red as explained above. If you want to change the font family of the title/heading of the widget than use the following code.
.WIDGET-ID  h3{
font-family: 'Open Sans', sans-serif;}
Now, replace h3 with the heading tag used in your blogs widget. You can learn more about heading tags on How to use Heading Tags.

That's All! Enjoy the large variety of Google Fonts in your Blogger blog.

Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

No comments:

Leave a Reply

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top