How To Use Google Fonts In Blogger Post

Your Blogger template's default fonts are basically Ariel, Georgia, Times, Trebuchet, Helvetica. These fonts are simple and not so attractive. If your blog running with these default fonts may be you will lost some audience, those audience who care about your blog design overall too. But these default fonts can be change easily. There are lots of font providers offers web fonts what can be easily integrate to your site. Google web font is one of the best web font provider. In Google font's collection more than 650+ font with various styles you can find.

Using Google font in your post, you can customize your font style more specifically, like font thickness, slant, width, line height, font weight, font script etc. Let's add Google font in your Blogger, this process is easy and difficulty is beginner.

How To Use/Install Google Font In Blogger Post :

Step 1 :

• Go to Google web font (Click Here)
• See demo of font family by Word, Sentence, Paragraph
• Use Filter (Left Side) for find more specific font style.
• After choosing a font style click on "Quick Use"
• Then you will direct to another page where you can find that font's set up codes.

Step 2 :

• Embedding CSS import (Easier)                           Or
• Embedding Link Standard (Easy)

Embedding CSS Import :

• On your chosen font's page you will see a option named "Add this code to your website"
• Select '@import' tab, and copy the given line
• Now, Login to your Blogger and select your blog
• Go to, Template and click on Edit HTML
• Search for ]]>< into code snippet (Using Ctrl+F or Cmd+F)
• And before ]]>< paste that copied line
• Then, go back to Google font's page and copy the line (font-family) of integrate the fonts into your CSS option
• Come back to Blogger's Template > Edit HTML, Again search for .post-body into code snippet
• Into post body's brackets paste that (font-family) line
• Save Template and check out your blog for live action.

Embedding Link Standard :

• On your chosen Font's page you will see a option "Add this code to your website"
• Below a <link> code you will see, copy it
• Now log in to your Blogger account, select your blog
• Go to Template > Edit HTML
• And search for </head> into code snippet (Using Ctrl+F)
• Above </head> paste that link code
• And modify the <link> code, Just add a slash (/) in the very last side of the <link> tag
• The modified version looks like this <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='Stylesheet' type='text/css'/>
• Then, go back to Google font's page and copy the line (font-family) of integrate the fonts into your CSS option.
• Come back to Blogger's Template>Edit HTML , Again search for .post-body into code snippet
• Into post body's bracket paste that (font-family) line 
• Save Template and check out your blog for live action

Additionally :
If you think font line height is not quite right than you expected. In that case add this code into .post-body bracket (line-height:1.5;)

And if you feel the font size is not suiting your site. So change font size with adding this code into .post-body bracket. change 16px to any px you want (font-size:16px;)

Then Save Template, you are done !

Share this

Author : Admin

Related Posts