How To Add and Use Custom Fonts In Blogger And WordPress

Tuesday, June 27, 2017 5 Comments

This post may contain referral links. For more info, please read my disclosure policy.

Custom web fonts
Blogger provides limited font styles for its users despite the availability of numerous fonts in the google web fonts. It's OK to get tired of the default fonts provided by blogger in the template designer. Also, you might want something girly, chic or fancy either for ads or blog header

There are tons of beautiful fonts online that will bring more life to your posts as well as design. Yes, your fonts can actually make your blog look beautiful.

Good news is, If your desired font is not in the Blogger template designer, you can add fonts to Blogger manually.



The most popular web font directory is Google Font library, which is a greatly utilized by web developers and designers. Unlike most web font sites, the fonts hosted on google are free for personal or commercial purposes and are easily accessible.

To add a font manually to your blog, all you have to do is head over to google web font, and find a preferred font (There are lots of fonts to choose from, don't get confused)


Add custom web fonts to blogger and wordpress
Once you've seen a font you'd want, you can click on its title which will take you to a new window. In the new window, click on “SELECT THIS FONT”.

custom web fonts for blogger and wordpress
You can simply click on the small round button just beside its title. You've selected a font and it will be displayed on a bar at the bottom of your browser window.

Click on the bar at the button of your browser window to show your recently selected font. You will see two fields with an HTML link and CSS code respectively (those are the key to a new font on your blog)

Now Copy the HTML link as seen and navigate to your templates HTML file, search for </head> then paste it just above it and save.
The </head> is found in the header.php file for WordPress users.

Google web fonts implemented
(Do not use the @import method to add a new font in your blog as it will affect your blog).

Important Notice:
Every HTML link must have a proper closing tag so to prevent getting an error message in an attempt to save your template, add this “/” just after stylesheet" and before > thus your HTML link will look like this <link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet"/>

Now that you've added the font to your blog, you need it to come to life and to do that you should change your blog's font family with its CSS code, depending on the font you'd like to change.

For bloggers Using Blogger.com
If you want to change your header font, all you have to do copy your new font's CSS and search for .Header h1 and replace the font-family CSS with the new one. If there is no font family simply paste your copied CSS code.

To change your post title font, simply search for h3.post-title and follow the step above.

To change your post body font, search for .post-body (follow the step above.)

To change your sidebar widget Title
Search for .sidebar h2 (follow the step above.)

To change your blog pager font search for .blog-pager a (follow the step above.)

If you'd rather not go through the stress above simply copy the CSS code below making sure to reply the font with your desired font and pasting it inside the Custom CSS box found in the advanced section of your blogger template editor.

.post-body, h3.post-title, .blog-pager a, .header h1 {
font-family: 'Bubbler One', San-Serif !important;
}

The CSS above with override your current font family.

Save all changes to see the new font on your blog.

Google web fonts
Its very possible to add multiple web fonts to your site. All you have to do is select the Google Fonts needed. They will be combined in one link.


Need more help? A comment should draw my attention to whatever you are facing.
Custom web fonts
Blogger provides limited font styles for its users despite the availability of numerous fonts in the google web fonts. It's OK to get tired of the default fonts provided by blogger in the template designer. Also, you might want something girly, chic or fancy either for ads or blog header

There are tons of beautiful fonts online that will bring more life to your posts as well as design. Yes, your fonts can actually make your blog look beautiful.

Good news is, If your desired font is not in the Blogger template designer, you can add fonts to Blogger manually.



The most popular web font directory is Google Font library, which is a greatly utilized by web developers and designers. Unlike most web font sites, the fonts hosted on google are free for personal or commercial purposes and are easily accessible.

To add a font manually to your blog, all you have to do is head over to google web font, and find a preferred font (There are lots of fonts to choose from, don't get confused)


Add custom web fonts to blogger and wordpress
Once you've seen a font you'd want, you can click on its title which will take you to a new window. In the new window, click on “SELECT THIS FONT”.

custom web fonts for blogger and wordpress
You can simply click on the small round button just beside its title. You've selected a font and it will be displayed on a bar at the bottom of your browser window.

Click on the bar at the button of your browser window to show your recently selected font. You will see two fields with an HTML link and CSS code respectively (those are the key to a new font on your blog)

Now Copy the HTML link as seen and navigate to your templates HTML file, search for </head> then paste it just above it and save.
The </head> is found in the header.php file for WordPress users.

Google web fonts implemented
(Do not use the @import method to add a new font in your blog as it will affect your blog).

Important Notice:
Every HTML link must have a proper closing tag so to prevent getting an error message in an attempt to save your template, add this “/” just after stylesheet" and before > thus your HTML link will look like this <link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet"/>

Now that you've added the font to your blog, you need it to come to life and to do that you should change your blog's font family with its CSS code, depending on the font you'd like to change.

For bloggers Using Blogger.com
If you want to change your header font, all you have to do copy your new font's CSS and search for .Header h1 and replace the font-family CSS with the new one. If there is no font family simply paste your copied CSS code.

To change your post title font, simply search for h3.post-title and follow the step above.

To change your post body font, search for .post-body (follow the step above.)

To change your sidebar widget Title
Search for .sidebar h2 (follow the step above.)

To change your blog pager font search for .blog-pager a (follow the step above.)

If you'd rather not go through the stress above simply copy the CSS code below making sure to reply the font with your desired font and pasting it inside the Custom CSS box found in the advanced section of your blogger template editor.

.post-body, h3.post-title, .blog-pager a, .header h1 {
font-family: 'Bubbler One', San-Serif !important;
}

The CSS above with override your current font family.

Save all changes to see the new font on your blog.

Google web fonts
Its very possible to add multiple web fonts to your site. All you have to do is select the Google Fonts needed. They will be combined in one link.


Need more help? A comment should draw my attention to whatever you are facing.

5 Comments so far - Join The Conversation!

  1. Cool article, I never knew that was an option before! Changing fonts around can really make a huge difference. Thanks for sharing!

    ReplyDelete
  2. That's really very informative! I'd be back for more. :)

    ReplyDelete
  3. That really good ı can try them on my blog

    ReplyDelete
  4. Didn't know how to do this - now I do! TY!

    ReplyDelete

Blog Archive

Contact / Address

Mr Sunday Joseph's Compound,
Off Goodnews street, Azikoro,
Yenagoa Bayelsa State
Nigeria.
Zipcode: 569101

Reach Us on
+2348122329659
or
Contact@blogtrovert.com

Blog Owned and managed By:
Joseph Onome.