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.
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.
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, 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:
<link href=’http://fonts.googleapis.com/css?family=Pacifico’ rel=’stylesheet’ type=’text/css’/>
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
h3.post-title, h3.entry-title {font-family: ‘Pacifico’, cursive;}
Change your blog header font
.Header h1 {font-family: ‘Pacifico’, cursive;}
Change your post body font
.post-body {font-family: ‘Pacifico’, cursive;}
Change your date font
.date-header span {font-family: ‘Pacifico’, cursive;}
Change your post footer font
.post-footer {font-family: ‘Pacifico’, cursive;}
Change your previous/next link font
.blog-pager a {font-family: ‘Pacifico’, cursive;}
Change your sidebar title font
.sidebar h2 {font-family: ‘Pacifico’, cursive;}
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.
