Google translate

How To Add Google Web Fonts In Blogger Blog

DATUK NET

Typography is an essential part of blogging, if your blog articles are neat and clean, easy to read and understand then it catches much more attention. In today's everyone wants there blog to be special, they want to customize their blog according to their need. These days blogger templates have come very user friendly and advance most of our templates are coming with advance features pre installed. But still, as we know there's no limit of creativity, and every different personal has different choices.

In today's article we will learn How To Add Google Web Fonts In Blogger Blog. This process is very simple but you have to do too many things. Google font is a library of numerous fonts for free, you can make your blog look beautiful with any of its font, also you don't need to worry about hosting as font files are hosted on google's server.

What are Google Custom Fonts, & Why to use them?

You must be feeling confused, why do you need to add extra file in your blog, but believe us, this extra file worth's much more than that. With help of this custom fonts, you can customize your blog according to your taste, An attractive and beautiful looking blog is always preferable then boring and unattractive blogs. You can customize your blog text, post text, blog title, widget title, post heading, page heading, sub headings and many more. whether you want simple readable text or stylish looking cursive text, everything can be done with these fonts  

Adding The Font File From Google Fonts 

To browse the Google Fonts library, access https://fonts.google.com/. There are 949 font families in the collection right now, and they keep adding more, so you may want to sort them.

To organize the fonts by style, you can use the menu of that website. The top menu lets you to add and preview your own text using the 'Type Something' field. From the same menu, you can pick the 'Size' and sort the fonts in 'Alphabetical order', by 'Date added', 'Number of styles', 'Categories', 'Language', 'Propertise' and 'Popularity':


Once you decided what font you want to use, click on the   button (If you want to use multiple fonts then you can select more then one font it will merge them into single file.) and at the bottom of the page a box will appear just click the box to enlarge the options related to that font.



After clicking a box will appear which will look like below, and there will be several options to add and remove.


Either you can use the font file as it is, or you can add several styling into your font, like different font weight and italic. You just need to click the 'CUSTOMIZE' option as shown in the image, and you will see options related to the font, you can see below image for reference.


Now that you have selected everything, just switch back to 'EMBED' option and copy the link file html, to copy just select it with the cursor and press cntrl + C into your keyboard. The file will look like the code below.

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

Now you just need to copy this file into your template header area, and to do so. Just follow below steps.

The First thing you need to do is to login into your Blogger account and go to >> Themes >> Edit HTML and search for the code <head> tag and just below it paste the font link file code.

If you don't know how to find specific code in blogger then this tutorial will help you.
How to Search and Find Specific Code in the Blogger Template Editor

Note :- The font file which google provides doesn't includes the closing tag / So you need to add that manually at the ending and after adding that it will look like below code..

 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"/>
Now that you have added the font file code you just need to customize your Css code, As we have explained in the beginning that you can customize fonts of blog text, post text, blog title, widget title, post heading, page heading, sub headings and many more. You just need to add proper css classes or Id's, so that you can customize the fonts of that respective sections, we have added some examples below, you can use these classes to customize your blog font styling. 

In the same time you also need to identify your font's family, you will get the family code in Embed section, see the below image for example.



The First thing you need to do is to login into your Blogger account and go to >> Themes >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

1. Blog Text


body { 
   font-family: font-family: 'Roboto', sans-serif;
}

2. Blog Title


#Header1 { 
   font-family: font-family: 'Roboto', sans-serif;
}

3. Post Title (Homepage & Postpage)


.post h2 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post h2 { 
   font-family: font-family: 'Roboto', sans-serif;
}

4. Post Headings (H2. H3, H4, H5, H6)


.post-body h2 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post-body h3 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post-body h4 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post-body h5 { 
   font-family: font-family: 'Roboto', sans-serif;
}
.post-body h6 { 
   font-family: font-family: 'Roboto', sans-serif;
}

5. Post Text


 .post-body { 
   font-family: font-family: 'Roboto', sans-serif;
}

6. Widget Title


.sidebar h2 { 
   font-family: font-family: 'Roboto', sans-serif;
}
Note :- These are some example classes, we don't guarantee you that it will match with your template code, as some templates have different classes and Id's, but most of the code will work like body and post related codes.

Note** :- We have made the css according to Roboto font family, if you are using any other font family, then you have to change the red highlighted text with your font family.

If you are still confused how to add css then here is a tutorial for you.
How to add css in blogger or blogspot blogs

Customizing The Text

Now That you have added the file and added the family name to, your blog text will appear in that font family respectively, now for further customization you can add weight and many more options, which will provide you extra customization options. You can add below properties into the CSS code.

font-weight: 400;
font-size: 12px;
font-style: italic;
text-decoration: underline;
letter-spacing: 1px;
word-spacing: 1px;
text-align: left;
text-shadow: 2px 2px #e4cbcb;
  • font-weight: This option is to increase the boldness of the text, the greater the  number will the bolder the text will be.
  • font-size: This option is to increase the size of the text, the greater the  number will the larger the text will be. 
  • font-style: This option is to make the text italic.
  • text-decoration: This option is to underline the text.
  • letter-spacing: This option is to increase space between individual letters.
  • word-spacing: This option is to increase space between individual words.
  • text-align: This option is for the alignment of the text.
  • text-shadow: This option is to add shadow into texts.
These are some examples of styling text, if you want to check more styling option the we recommend you check W3School's website.

Conclusion

Congrats !! You have made it. now you have learned that How To Add Google Web Fonts In Blogger Blog. Visit your blog and check the awesome customization live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us.

Post a Comment

0 Comments