Categories
24 Days of WordPress Tutorials

Day 1: Custom fonts with Google Fonts

Bored of always using Arial, Georgia, Times and Courier for your fonts online? Well, the old safe font restrictions are crumbling and you can now start adding new cool fonts to your WordPress sites. Just make sure you do it right. In this first of two tutorials you’ll learn how to use free fonts from Google to bring some new font styling to your site. In the second part you’ll learn how to do the same with FontSquirrel.com fonts. But first some history:

In web design there is one rule that drives people insane: You need to stick to so-called “safe” font families. These are

  • Arial, Helvetica, sans-serif
  • Georgia, Times New Roman, Times, serif
  • Courier New, Courier, monospace

The reason for this very annoying restriction is that when you define a font family for text on a website you are in fact telling the visiting computer to use one of its fonts to display the text. And because not all computers have the same fonts, and the fonts listed above are pretty much the only ones found on every computer, if you want to ensure that all visitors get the same experience you are stuck using one of these font families.

You’ll notice that each of the three safe font families actually contains three or more font definitions. The way this works is the browser asks the computer “Do you have Arial?”. If the computer is a PC it’ll say “Yes” and Arial is used. If the computer is a Mac it’ll say “No” and the browser will move down the line and say “OK, do you have a Helvetica then?” whereupon the Mac will answer “Yes” and Helvetica is used. And if the computer has neither Arial nor Helvetica the browser will ask for the default sans-serif font.

But there is another way. Using a relatively new CSS style called @font-face we can now call custom fonts from the web and have browsers display those fonts instead. It’s not a perfect science yet, and you’ll find that there are browsers that screw it up, but it’s the start of a new revolution of custom web fonts. Just always remember to add some standard fonts in your family in case the browser can’t take the @font-face heat.

Custom fonts with the Google Font Directory

By far the easiest way of introducing new fonts to your site is through the open source Google Font Directory. All you need is a couple of very minor tweaks to your code. This tutorial focuses on WordPress themes but you can do this to static pages and other CMSes as well.

Josefine Google Font

  1. Go to the Google Font Directory and find the font you want to use.
  2. Click the font you want and you’re taken to the page for this font. From here you can look at examples of the font in use, look at the entire character set and even launch the font previewer where you can type in custom text and see how the font displays. This is a good idea since some of these fonts look pretty crusty live on the web.
  3. When you are satisfied that this is in fact the font you want to use, click Get The Code and you are taken to the code page.
  4. Depending on the font you chose it may have a lot of different variants. I recommend turning them all on so you have lots of options (thin, condensed, bold, italicized etc etc) (see image above).
  5. Now you have to do two things: Copy the stylesheet code and paste it into the head section of your header.php file and insert the font name into whatever font family you want it to be applied to in your style.css file.

Adding a new font stylesheet to header.php

Rather than having to add the @font-face style directly to your own stylesheet the Google Font Directory lets you call their custom font stylesheets directly. This is great because it reduces the server load on your site and also means if Google makes changes to the font those changes are reflected immediately on your site. You add the custom font stylesheet to your header.php file within the <head> tag. To ensure that it works you should always add it above the code that calls the theme stylesheet for your site. That code looks something like this:

Open header.php in your favourite HTML editor or even Notepad, find the line above, create a new line directly above it and copy and paste in the stylesheet code from Google. When you save and upload the new header.php file the browser will call the custom font stylesheet from Google and be ready to display the custom font on your site.

Add the custom font to your content

If you’ve worked with CSS before the next part is child’s play. But if CSS is foreign to you it may be a bit tricky to understand so I’m going to try to give you a basic primer here: All content on a HTML page is wrapped inside beginning and end tags. As an example all paragraphs are wrapped between a beginning <p> tag and an ending </p> tag. CSS styles are applied to these tags throughout your pages, so to style the content within the <p> tags you create a style called ‘p’ and define a set of parameters. The p style for this site looks like this:

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #333333;
	margin-bottom: 10px;
	text-align: justify;
	line-height: 1.5em;
}

If you want to use a custom Google font to style a particular tag you simply find the style that controls that tag and add the font name to the font-family variable like I’ve done below with the Josefin Sans font:

p {
	font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #333333;
	margin-bottom: 10px;
	text-align: justify;
	line-height: 1.5em;
}

Now all you have to do is save the style.css file and upload it to your site and you’re good to go.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

4 replies on “Day 1: Custom fonts with Google Fonts”

the typography tool of Lubith has over 400 fonts to choose from and additionals scripts supported by some of them. I think it’s more than enough for someone that wishes to customize his sites in quick easy steps. Plus it has some font editing options which can help you get the exact look that you’re looking for.

Comments are closed.