Many times regular blogger think to do something different with their blogs,Either by changing template themes,adding new widgets and changing different fonts in their blog post to give them a fancy look. But blogger has a limitations of having 7 basic blogspot fonts(i.e. Arial,courier,Georgia,helvetica,Times,Trebuchet and Verdana). Now if you want to Add more fonts for Blogger with Google Fonts to give it fancy look you can use our below method using Google Font API,Google launched its beta version few days ago,So here is our step by step guide to use this method to add more new fonts for blogger :
How to add more new Fonts for Blogger posts using Google Font
- For using this method first of all you have to visit Google Font Directory to choose any particular font among all available Fonts.
- When you Click Google Font Directory link you will reach a webpage which has many fonts other than 7 fonts available in blogspot blogger standard font list(as shown in figure below).
- Now Suppose I want to use “Jacques Francois” font, then click on Add to Collection Link Highlighted in Blue color in above image. You can choose multiple fonts to add to your collection at once. In this page few fonts are available in different styles, so if you want all or any particular style, then choose them before, and then add to your collection. You can also remove already added fonts from your collection, if you don’t want to use them.
- After selecting all fonts of your choice, click on the Use button located in the blue collection toolbar at bottom-right corner of the page.
- Then you will see an indicator on the right side displaying the impact of your font selections on the page loading time.
- Now Scroll down this page, and see the 3rd Section, There is a code mentioned for this font, Copy this code to use it later.
<link href='http://fonts.googleapis.com/css?family=Jacques+Francois' rel='stylesheet' type='text/css'>
- Just copy this code and paste it to notepad or wordpad and then add “/” (slash) before “>” ,now it looks like “/>”, as shown in this code :
<link href='http://fonts.googleapis.com/css?family=Jacques+Francois' rel='stylesheet' type='text/css'/> - Now go to your blogspot Blogger dashboard,then click on design tab and then click “Edit Html” tab as shown in figure below.
- Now in “Edit Html” Tab You will see a clipboard with HTML codes in “Edit Template Section,Now find <head> by pressing on your keyboard “Ctrl+F” key and search and paste above font code below <head> as shown in figure below.
- Now we can use above fonts in heading and text of our blogger posts.For using these stylish fonts you have to add these fonts in your css or style, example shown in figure below. We have taken example of Tangerine Font here to add CSS in stylesheet.
Suppose you want to add a text with “Tangerine” font so you have to write code something like this :<span style="font-family: Tangerine; ">Here you can write any text you want to display in Tangerine font.</span>And then this code will appear as below in any webpage.
Here you can write any text you want to display in Tangerine font.
So after applying above method you will get cute ,stylish,beautiful fonts embedded in your blogspot blog posts.So enjoy with these stylish blogger fonts.
hi there will this technique add more fonts to the font list which we see the blogger post editor or I have to use it with separate lines of code??
Hi allwyn, You have to add only one line of code in your blog post, refer point no. 9 in above post for your query.
Hi allwyn, You have to add only one line of code in your blog post, refer point no. 9 in above post for your query.