How to customize blogspot title font style with Google free webfonts

It was long time ago when i last time played with sIFR. This blogs used to customized with custom fonts on the title post, but last year (i don't really remember) blogspot made a change on their system which somehow prevent me from editing this themes.


Now i had a new look in my post title style using Google webfonts. If you can see it on my post title, I'm using a font named Federo from google free webfonts. It was as easy as counting to three, copy, paste and edit one or two css section on blogger HTML edit form. So here it is.

Copy CSS source from google webfonts

  • Go to Google Webfonts
  • Find a font suitable to your theme
  • If you found onw, click on "Quick-use"
  • Scroll down the page until you see the CSS link code
  • Copy the code.


Paste link Code to Blogger edit HTML

  • Go to blogger dashboard -> your blog -> Template -> Edit HTML
  • Click proceed to continue, and check-on Expand Widget Templates.
  • Find "<![CDATA[/*" (b:skin) and paste the CSS link code before it.
  • Add slashes before the closing code ">"


Edit CSS section title tag (i.e. H1, H2, H3)

  • Ctrl+F to open search form.
  • Search your post title tag (in my case H1, default blogspot usually H2).
  • Edit or add custom font name before the current font (you can see font name on Google webfonts page).
  • Click Preview, and if everything run as expected click Save Template. 


Watch my video to see more steps on getting Google webfonts to your blogspot.