How To Add Custom Fonts In Blogger (Video Tutorial)

In this post I am going to explain you how to add custom font style to blogger blog. Adding Custom Fonts to Blogger can improve the look and feel of your blog.

In your templates you can use any font you want, but these would be properly displayed only if the viewer has those fonts installed on his/her System.

Font embedding Techniques allows you to use any font on your Blog and these fonts will be viewable to the viewers even if they don’t have the font installed on their Systems. Adding custom fonts to WordPress works in the same way. You will add the first piece of code between the head tags in your header file (WordPress does not require that extra slash at the end) and the second piece of code goes into your stylesheet. You can see a list of available Fonts at the Google Font Directory.

How To Add Custom Fonts To Your Blogger Blog

Font Settings

Make Font Setting which your like.
By Default the Google API provides the Regular version of the Font. If you need specialised versions like  bold, italic or bold and italic,
Now to apply these fonts on your template, you can use these in your template CSS
For example you may use something like You will have to add a back slash "/" at the end of link and before > Closing.. look like this "/>"

Now you can add custom font style to your blogger

1. First we change our blog Headings font.
1. Go to your blogger Dashboard>> Template>> Proceed>> press CTRL+F and search this code. (how to find code using search bar)
Search The Following Code in your blogger Template CSS Section.

h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:400;
    font-family: 'HERE IS YOUR CUSTOM FONT NAME', serif;

Note:- If you cant find code look like this just leave comments.. I will try help you about finding code.
2. and Second we change our blog paragraph font.
Search The Following Code in your blogger Template CSS Section.

body {
 background: #FFF;
 color: #000;
 font-family: "HERE IS YOUR CUSTOM FONT NAME", sans-serif;
 font-size: 14px;
 line-height: 1.6;
 margin: 0 auto;
 padding: 0;
}

3. Change Sidebar Widgets Heading Font.
Search The Following Code in your blogger Template CSS Section.

#sidebar h2 {
text-transform: capitalize;
border-bottom: 1px solid #D3D3D3;
color: #404040; 
font-family: "HERE IS YOUR CUSTOM FONT NAME",  sans-serif;  
font-size: 2em;  
line-height: 1;  
font-weight: bold;  
padding-bottom: 10px;  
margin-bottom: 10px; }

4. Change Your blog Header (Blog Name) Font.
Search The Following Code in your blogger Template CSS Section.

#header h1 {
 letter-spacing: 0;
 margin: 0;
 padding: 0;
 font-family: "HERE IS YOUR CUSTOM FONT NAME", sans-serif;
 font-variant: small-caps;
 text-transform: none;
 font-weight: bold;
 color: #088A4B;
 font-size: 70px;
 line-height: 1.2;
 text-shadow: 3px 3px 3px #aaa;
}

Your Blog Headings. Like H2, H3, H4, as your wish. if you have any trouble about this tutorial leave your comment or questions below in comment box. Thanks for Reading our post.