How To Add and Use Custom Fonts In Blogger And WordPress

Last Updated On: February 14, 2020Nomzy
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.

How To Add and Use Custom Fonts In Blogger And WordPress 1

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=”” 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
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 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,, .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.

Prev Post

Premium blogger templates Recommended for personal, lifestyle and Feminine Bloggers

June 26, 2017

Next Post

Why Blogger Is The Best Place To Blog For Free

June 27, 2017

Comments (5)

  • AModern Mommy

    July 16, 2017 at 11:19 pm

    Didn't know how to do this – now I do! TY!

  • selanikli66111

    July 16, 2017 at 11:28 am

    That really good ı can try them on my blog

  • Debdut

    July 16, 2017 at 11:04 am

    That's really very informative! I'd be back for more. 🙂

  • Dee studio

    July 16, 2017 at 10:35 am


  • Timothy Gagnon

    July 16, 2017 at 10:33 am

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

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.