Tuesday, November 25, 2014

Adding Fonts to Blogger

To add a font to blogger go ahead and find one from http://www.google.com/fonts. Once you have one follow their instruction to get a piece of code that looks like this


    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'/>

Go ahead and paste that code right under the <head> tag in your blogs html (Find it by going to Template then Edit HTML). Using control F really helps. Now find the group name of the font you want to change. Google has done a great job of naming them. I wanted to change my blog title so I found this chunk of code.

<Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 80px Crushed"/>



Go ahead and change the value from Crushed (or whatever font name it has) to be your new font name. In my case it looks like this.


         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 80px Raleway, FreeSans, sans-serif"/>



You'll notice that I also have FreeSans and Sans-Serif added in there. These are backup fonts. In case Raleway doesn't load it will use these fonts to still try and maintain the general look of my blog.


Hopes this helps. Comment if you have any questions.... or comments

No comments:

Post a Comment