Home Web Master blogger How To Use Custom Fonts in Blogger or WordPress

How To Use Custom Fonts in Blogger or WordPress

 Javascript codes were then created to allow you to use whatever font you wanted, whether it was pre-installed on your visitor’s computer or not. This method was tricky and required more work than it was worth.

Today, we have Web Fonts, which make it incredibly easy to use not-so-basic fonts throughout your site. If you’re not familiar with Google Web Fonts, this post will show you exactly what they are and how to use them.

First, why web fonts? Let’s say you want to add a fancier font or a script font to your blog. Web fonts make that possible without having to have the font installed on your actual computer. Instead, the font is accessed through a script, where it is stored on the Google servers… so anybody can see it!

It’s easier than ever to install web fonts on your site. First, you need to choose a font you like from the Google Fonts site. This can take some time, but luckily you can filter your options if you wish. You can even change the default sample text to whatever you like so you can see exactly what your text will look like with each font.

How To Add Custom Fonts To Your Blog

Once you find one you like, click on the Quick Use icon:

Using Google Web Fonts

On the next page, scroll down and grab the “Standard” code:

How To Use Web FontsHighlight the text and copy it to your clipboard (CTRL/CMD + C). If you’re using WordPress, simple paste this into the <head> of your HTML template. For Genesis, go to Genesis > Theme Settings and insert it into the first Header and Footer scripts section.

In Blogger, you’ll want to go to Template > Edit HTML and paste it just under the <head> code. In Blogger, however, you need to add a trailing slash / to the end of the URL, right before the ending bracket, like so:

Next, you can add the font to your stylesheet (CSS) wherever you like.

Custom Web Fonts

Copy the CSS code shown on the font page and either replace existing font-family elements with your new font, or create new elements. It helps to know which IDs are applied to the different elements of your blog. Here are some examples for Blogger that you can add to the CSS portion of the Template Editor:

Remember to replace the font-family bit with your own generated font-family code!!

Change your post title font

Change your blog header font

Change your  post body font

Change your date font

Change your post footer font

Change your previous/next link font

Change your sidebar title font

Save your work and your new custom font will be applied!

You can also add multiple web fonts to your site. You can either just generate another “Standard” link code from Google Fonts, or you can combine them by selecting the Add To Collection button instead of the Quick Use button:

Using Multiple Google Fonts

They will be added to a window on the bottom of the screen, and selecting “Use” will generate a single “Standard” link code for all of them, as well as a CSS style for each.

I hope this helped you. Be sure to check out my HTML/CSS lessons to learn even more about codes.

Previous Post

The Ultimate HTML Cheat Sheet For Beginners

Below is a complete guide of HTML codes that you can copy and paste for use on your own blog or website. ... Read more

Next Post

Learn How To Code HTML… and Have Fun!

When you’re managing a blog or a website, knowing the basics of HTML, CSS or even Javascript can be a crucial skill ... Read more