Custom Font Styles (Blogger)

When changing font style you first need to identify what font you want to change. This will take a little knowledge in coding to figure out. I wish I was able to go over each area with you but their are so many templates this would be impossible to do.

Once you have identified the area you want to change, you can change it one of two ways.

Option 1:

Design--> Edit HTML--> Find location

Its best to change it in the /* Variable definitions section of your Edit HTML page to keep from messing up any of the Template Designer functions. If you want to change it directly in the CSS and not the Variables  then you should do Option 2.

Once you find which  section you want to change you may see something  like this below

<Variable name="body.font" description="Font" type="font"
         default="normal normal 13px 'Trebuchet MS', Trebuchet, sans-serif" value="normal normal 13px 'Trebuchet MS', Trebuchet, sans-serif"/>

The value area is what you want to change do not tamper with the default section.

 The way this works is  Trebuchet MS  is the main font but if your computer or browser does not have that font package installed, it can not display Trebuchet MS. So it will display Trebuchet instead. And if that is not able to display it will use san-serif. 

 Make sure when changing the font you add in the proper commas, colons and prefix's.  Make sure you have the proper capitalization in the font names as well.
If you notice that Trebuchet MS  is displayed as 'Trebuchet MS'.  This is because it has a space in the font name. Anytime you see a space in a single font name you will need to close the name with quotations.

 Option 2: (This is another option and not a addition to option 1)


Design--> Template Designer--> Advanced--> Add CSS

You can click the link on the Add CSS to learn more about this option.

Now with this option you will be directly overriding specific section in your Edit HTML. Keep in mine Variable definitions  is not a proper code to use in the Add CSS function. What your looking for is the specific elements.

So to use the same font as we did before in the variable definition we would add something like this below in the CSS box.

body {
font-family: Trebuchet, sans-serif;
font-size: 13px;
font-style: normal;
}

Notice how I'm using font-family instead of font. This is a safer method to use because if the person viewing the blog does not have the selected font on their computer it will automatically display another font of the same family. Again you need to make sure you have the proper capitalization and quotations.

To learn more about CSS font and styles please refer to W3schools