How To Change The Font On My Blogger Blog

The idea of adding custom fonts to your blog has definitely come a long way over the years.

Back when I started creating websites, you could pretty much only use standard computer fonts like Arial, Verdana, or Times New Roman.

The font had to be one that was available (by default) on every computer. If you were to add a font to your CSS/HTML that you had installed to your own computer, only the visitors with that same font installed would be able to see it properly.

You can imagine this made for some messy looking websites! Unfortunately, some people still try to add fonts this way, not realizing their errors.

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.

Why Web Fonts?

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! And 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.

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

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

Highlight 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 (Studiopress), 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.

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:

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 lesson to learn even more about codes.