How To Add and Use Custom Fonts In Blogger And WordPress

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)



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


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.


(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.


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.