30 Dec 2011

Blog Design - How to Add a Custom Font to Blogger Blogs


So I figured it is about time I provided you guys with another blog design tutorial. I have had alot of queries on adding a custom font to your blogger blogs so here is a little guide on how to go about it. I hope it helps and please send me your links if you do implement them.Go to the Google Fonts Website.

  

 Select your chosen font from the 200+ collection.



Click on 'Quick use - it's underneath the font's sample text .


Scroll down to section number 3 and copy the code.
Log into your blogger dashboard and go to your 'template' page.
Click on 'edit html'.
Search the code for the /head tag. (Ctrl+F then enter /head).
Paste the code just above the /head tag. As seen below!


Now we just need to tell Blogger where it should use this font.
To change your blogs header font
Locate the h1 (header) tag in your template - as below.


Then copy the following code under the h1 tag
        font-family: 'Sansita One', cursive;
Remember to replace 'Sansita One' with the name of the font you've chosen.


To apply the new font to your post title follow the same steps as above. But instead add the code the the h2 tag.For side bar titles and text just change the H3 and H4 code.If you get stuck at all or you'd like a custom blog design just email me or leave a comment here.

1 comment:

  1. Thank you so much for the post.

    Read 2-3 articles to use custom fonts for my blog but ended up unsuccessful.

    After reading this post I solved the problem. Cheers.

    Thanks.

    Kathrine

    ReplyDelete