How To Add Google Web Fonts in Blogger

How To Add/Install Google Web Fonts in Blogger

In this post, I will show you "How To install Google Web Fonts in Blogger". Google Fonts are free, beautiful and easy to install. They have more than 629 fonts right now and they keep adding more. If you're fed up of old fonts available in blogger like Arial, Courier, Georgia etc and you want some new fonts which are stylish then this post is best for you.


Adding Google Web Font To Blogger

Step 1: Go to Google Fonts.

Step 2: Type the name of the font in Search Box or keep surfing their site and you will find any good one for your blog.

Step 3: As you will choose which is best for your blog, Click on Quick Use button as show in the picture below. You can also add them in your collection by clicking on Add to Collection.

Step 4: Now you will be asked to choose Font Stlye. Bold-Italic-Underline and many other styles.

Step 5: After selecting your font styles, Scroll down until you see 3.Add This Code To Your Website.

Step 6: Copy the code that is given in Standard Tab.

Example: The Font Bree Serif code looks like the below code.

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'/>

Step 7: Now go to Blogger, and log in to your blogger account.
Step 8: Click on Template at left side and then Click on Edit Html.
Step 9: Hover your cursor on the code and press CTRL+F and a small search box will appear.
Step 10: Type </head> in the search box and press enter.
Step 11: Paste your font's code just above the </head> tag.

NOTE: Before pasting the code there, just type a / before the > in your code as shown in the code below.

Original Code:

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>

Code After Placing / :

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'/>

Step 12: After placing a / paste the code above the </head> tag.
Step 13: You will also see that Google Fonts will also provide you a CSS Code For your font.

Step 14: Now it's up to you that where you want to use it. In Post Titles, Post Body, or Specific Text.

Add the font name to your CSS styles just as you'd do normally with any other font.

h1 { font-family: 'FONT NAME'; font-weight: 400; }

For Post Titles You will use this CSS Code:

.post-title {font-family: 'FONT NAME'; }

For Post Body You will use this CSS Code:

.post-body {font-family: 'FONT NAME'; }

For Specific Text in Blog Posts: If you don't want to use that Font for all Body Posts and you only want to use that font on some text, not on whole, So you can use this CSS Code in your Blogger Post Editor.

<span style="font-family: FONT NAME;">Type Your Text Here</span>

Enjoy Using Your New Font.
If you didn't understand any part, Ask us Through Comments.