tutorial - how to add fonts from google fonts to blogger

update 19.09.2013

1. Go to page: http://www.google.com/fonts/#

* click images to view larger image

2. Choose a font. 

Find the fonts that will be best suited for you and your blog.


In the "preview text on the screen" you can enter your text to see if the font supports the characters specific to your language. (special characters, softening) If not, will display the x's or the letter did not match the font.

3. Add the font to collection. Press the button in the lower right corner.

4. At the bottom of the page you can see what fonts you have added to your collection. Select the Use.

5. In the next window, pick a style, and if you need the appropriate extension. Do not close this page.

6. Copy the code from the box No. 3 and paste it 

Initially, the link looks like this:
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>

After the modification is supposed to look like this:
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'></link>

immediately after the code add: </link>

7. Do backup the template, just in case. (Layout menu)

8. Open the HTML code of your template (edit code) and look for <head>. To do this, press CTRL + F and in search box type a search term.

9. Once you find the <head> paste the code, and remember to add closing tag </link>

To see if there is any error, see the preview. Sometimes, in the next line of code you should delete </link> tag. Before saving check preview.

10. If everything is in order, you can use the font to change the title of post, etc..To do this, replace some these codes within the code from field No. 4 (eg: font-family: "Noto Sans', sans-serif;)

To change the title of the posts:

To change the font header:

To change the font body:

To change the font of the pages widget:

To change the titles of dates and widgets:

To change the font of the content of post:

Final advice:
You can add multiple fonts at a time and replace various components with interesting fonts.  Often check the preview to see the results.

* This tutorial applies to standard templates blogger, not downloaded from the internet.

Do you have a questions? :)

facebook  twitter  pinterest RSS   bloglovin  g+ shop 

Post a Comment