How to use Google Font with your Blogger blog

I don't know if you noticed but I'm using a brand new font for my blogs here on Blogger. I believe Google has added a few dozens Google Font (formerly known as Google Web Font) fonts last year, a major improvement to the previously tiny selection of fonts available to Blogger users. Still, apart from the many fonts that Google has made available on Blogger, there are hundreds more beautiful and excellent fonts to choose from the Google Font site itself. For example this website has listed the 40 best Google Fonts which you are free to use on your website or blog. So here's how to use Google Font on your Blogger blog.

First you'll need to pick which font you would like to use from Google Font. Once you've made up your mind click on SELECT THIS FONT on the top right corner of the page.



Next you need to copy the URL for the font. On Embed font, make sure the Standard tab is selected and highlight the URL given. In this example I have chosen the Work Sans font.





Next, sign in to your Blogger blog, go to Theme and click on Edit HTML. Before you proceed any further, you might want to backup your Blogger template just in case something goes wrong. Click on the Backup/Restore button on the top right of the page.



You'll need to find the < head > tag in the code. Ctrl+F to find it quicker and once you do, paste the font URL you've copied earlier directly under the < head > tag in the code. Ctrl+F to find it quicker and once you do, paste the font URL you've copied earlier directly under the tag.

<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

Now you'll need to add an extra code to the original URL that you have copied and pasted above. Highlight the text

rel="stylesheet">

and replace it with:

rel='stylesheet' type='text/css'/>

You will be able to click Save theme if you've got the codes correct or else Blogger will ask you to fix the error in the codes.



The next step is to add a few extra lines into the theme's CSS. Since I chose Work Sans as my font, my CSS code would be:

font-family: 'Work Sans', sans-serif; }



Go back to Theme, click Customize > Advance> Add CSS. Copy and paste the code lines below in the box. As you can see I've included the lines to change pretty much every part of the blog from post title, content, sidebar to gadgets. The most important lines you need to change are probably the post-body, header and post-header. Feel free to add or remove any lines necessary from the codes below. You will see the effect instantly on the blog preview below. Once you're finished, remember to click Apply to Blog.

.post-body {

font-family: 'Work Sans', sans-serif; }

.Header h1 {

font-family: 'Work Sans', sans-serif; }

.post-header {

font-family: 'Work Sans', sans-serif; }

.post-footer {

font-family: 'Work Sans', sans-serif; }

.Header h2 {

font-family: 'Work Sans', sans-serif; }

.post-title {

font-family: 'Work Sans', sans-serif; }

.blog-title {

font-family: 'Work Sans', sans-serif; }

.gadgets {

font-family: 'Work Sans', sans-serif; }

.widget {

font-family: 'Work Sans', sans-serif; }

Apart from the font, I have also edited the line spacing so that they are a bit further apart to improve readability. To do this, go to Theme > Edit HTML and search for the Search for .post-body line. They should look something like this:

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;

What you need to do is change the line-height from the default value to something like 1.6 or 1.7, it's up to you. This will change the line spacing for all your current and future posts.

Finally, I've also changed the spacing between my blog title and the post title. Previously there's a reasonably big white space between them meant for the Pages navigation bar. However since I didn't put anything there, it becomes a big white space which doesn't look right to me. Once again go to Theme > Edit HTML and find the line .Header h1. It should look something like this:

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
margin-bottom: -60px;
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
margin-bottom: -20px;
}

As you can see I've added the line margin-bottom: -60px; under .Header h1 which decreases the space under the blog title and also margin-bottom: -20px; under .Header .description which adjusts the space above the post title. Feel free to experiment until you got the spacing right.

Bear in mind I only tried these modifications on the Simple theme on my Blogger blog but it should work with the other themes provided by Blogger. It might not work though with other themes or templates created by third-party designers. Proceed at your own risk and remember to backup your existing themes first.