How to use Google Font 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 provider offers web fonts what can be easily integrate to your site. Google web font is one of 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. Read on-

How to use/install Google Font in Blogger post

Step 1: Choosing Fonts

• Go to Google web font (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: Installing Fonts
You can install a Font family in two way:

• Embedding CSS Import (Easier)

OR

• Embedding Link Stranded (Easy)

1. 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, select your blog

• Go to 'Template' tab, then select '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 page; 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.

2. Embedding Link Stranded (OR)

• On your chosen Font's page you will see a option named '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’ tab. Select ‘Edit HTML’

• And Search for </head> into code snippet (Using Ctrl+F or Cmd+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 page; Again search for .post-body into code snippet

• Into post body's bracket paste that (font-family:) line (See upper image to understand)

• 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 in to .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 in to .post-body bracket. change 16px to any px you want.

font-size:16px;

Then 'Save template', you are done, Check out your Blogger Blog to see the changes.

Faq-

• Mind the page loading speed before you set up a font in your blog.

• If your template does not contain .post-body search for .post

Using Google Font in blogsites enriches your site design and represent your style of blogging. So install fonts into your Blogger blog today and make your blog trendy and beautiful.