How To Type And Change Font On Blogger Template With HTML

Sometimes, the font type (font-family) blog template is less innate liking, so we had to change it to another font types in order to look better or at least appropriate to the context / theme of the blog.
On this occasion, firstly I will discuss about how to change the font type using CSS instead of Custom Fonts and Font (which uses javascript and usually comes from Google API). CSS font replacement is quite safe and fast on the load, because the Computer Browser and have the fonts database (called "Web Safe Fonts").
Overview About Type Fonts (font family) in CSS
Type fonts is done by declare font-family property. So in writing, a description of the CSS
font-family written as the following example:

p {font-family: "Times New Roman";....;}

or shortened by (written with font only):

p {font: "Times New Roman";....;}

There are two categories of fonts:

a. Font family: The names of the main (root name) font, such as "times", "arial" courier ", etc..

b. Generic family: derivative font names, such as "serif", "sans serif", "cursive", etc..

Font-family writing that often encountered in CSS consists of a generic font-family and a family. Both are written sequentially to the destination if a font is not available in the database of a browser, the browser will refer to other types of fonts that have been written on the back.
example:

p {font-family:  "Times New Roman",Georgia,Serif;...;}

Note: note the quotes in the Times New Roman. Quotes used in the name of the font that has a blank spacing (white space).
Always write the CSS font type with the rules as above for the case a visitor is using a browser that does not have the desired font database, so that the browser can directly jump to the other font types.

Fonts In Blogger Template

 
Basically the font in the Blogger template defined by CSS styling, so if you have to change the font type, then clearly the changes made in its CSS. There are two ways that are commonly used to make the default font in Blogger template:

1. CSS font to write the variable parts (elements), for example the title of the blog, the blog description, post title, post footer, footer, sidebar titles, and so on. Then write the variable font-family on each element. Variable is located at the top of the CSS, usually after / near <b:skin> <! [CDATA [.

Examples of its variables:

.......................
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif" value="italic normal 80% Arial, sans-serif"
>
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Georgia, Times, serif" value="normal bold 142% Trebuchet, Trebuchet MS, Arial, sans-serif"
>
.......................

For example, if I want to declare the type font used in the title of the post (post header), I use a variable name (name =) postTitleFont as representative of the type font in the font family name of the property that has been written on the blog variable. Variable names are used as announcer written beginning with a $ sign:

. Post h3 {font-family: $ postTitleFont;}

2. Font type of write directly on its properties (font-family or font). Example:

. Post h3 {font-family: "Georgia, Times, serif; ...;}

Thus the points as well as how to change / replace the font type in Blogger so easy.
Changing Fonts in templates Blogger / Blogspot
In accordance with the two ways to specify the font in Blogger template above, then surely there is any way to replace 2, ie change the font on variable or directly changing the font-family property in each element. Change variable is very risky because there is a default value and the value which is the general rule on the main elements of blog .. Therefore, better font change font properties directly on her family.

How to find and change the type of font family on every CSS element:

1. Go to Edit HTML / Template Blogger.

2. Find CSS elements that you want to change,

it is located between <b:skin> <! [CDATA [ and ]]> </ b: skin>. 

3. Each element has a Blogger template CSS in different names fit was provided by the manufacturer, but in general, the names were almost identical and have the same general announcer:
For example: To post a title element, usually denoted by .Post h3,. Post h2, h3 # post, # post h2,. H3,. H2, (h expressed header or title / author, the title applies to the sidebar, etc.), and much more. To post content usually expressed with. Posts. Thus the sidebar, there are many variations, but you can bet all contain the same words: sidebar.

4. After finding the element sought, then look for the font-family property or behind existing font or font definitions like variable names variable example above. Replace with a new font types in that section. Example:
. Post h3 {font-family: Georgia, Times, serif; ...;} 
Replace part blue font with other fonts.
or usually also displayed the variable name:

. Post h3 {font-family: $ postTitleFont;}

Replace part blue font with other fonts.

5. You can also add a new font on elements that do not have the font-family rule.
For example. comment section of my blog does not have rules specific font type, then I can add CSS rules font-family/font in it:

Before:  #comments {margin: 0px 0px 0px 0px; padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; border: 1px solid #ccc;background:#fff;}
After: #comments {margin: 0px 0px 0px 0px;padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; font: "Times New Roman", Trebuchet, Serif; border: 1px solid #ccc; background:#fff;}

5. To find out the types of fonts, check the Web Safe Fonts CSS.

6. When finished changing or adding fonts, save the template.
If there are problems or questions regarding fonts, changing fonts, and CSS elements are not known blog, feel free to use the comment form below. If you want to change the font blog with Custom Web Fonts refer to How to Use / Install Custom Fonts in Blogger.

Posted in: