How to Change Font Family in WordPress

I came across this situation where one of my clients didn’t want the basic font style that came with the WordPress 2010 theme. Ordinarily,  it’s simple to change Arial for Georgia or Verdana, but what if you wanted a custom font like in this case Perpetua? Not as easy.  Why? First it’s a custom font so not every computer is going to have it in the fonts folder. Secondly, every browser has a different font format.

Here is the code and steps I took to change the Font Family in WordPress.

1. I got this code from Six Revisions (great website by the way). This code establishes the @font-face family in style.css

@font-face {

font-family: ‘Perpetua’;

src: url(‘http://www.xyz.com/perpetua_titling_mt_light-webfont.eot’);
src: url(‘http://www.xyz.com/perpetua_titling_mt_light-webfont.eot?#iefix’) format(‘embedded-opentype’),   url(‘http://www.xyz.com/perpetua_titling_mt_light-webfont.woff’) format(‘woff’),         url(‘http://www.xyz.com/perpetua_titling_mt_light-webfont.ttf’) format(‘truetype’),         url(‘http://www.xyz.com/perpetua_titling_mt_light-webfont.svg#Perpetua’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

You can call the font-family anything you want but keep it simple. Each source url is needed for each browser format. For example eot is for IE, ttf is for FireFox and Chrome, and svg is for mobile. As you can see you will need to host these font formats on your WordPress server or elsewhere.

2. Now scroll down style.css about a third of the way until you get to the #access section, then look for this code:

div.menu ul {

list-style: none; margin: 0;

font-family: Perpetua, Arial, Helvetica, sans-serif;

}

As you can see add your newly created font family as the first style. Arial, Helvetica, san-serif are the backups.  This part of the code will change your navigation font.

3. This part is optional – changing your page title font. My thought was that it ties in with the navigation. Scroll down a little bit more in styles.css (about half way) until you get to #content .entry-title code.

#content .entry-title {

color: #000;

font-size: 22px;

font-weight: bold;

line-height: 1.3em;

margin-bottom: 0;

font-family: Perpetua, Georgia, Palatino, Times New Roman, serif;

border-bottom: solid 1px #000;

}

Similar to the #access changes add your new font in the first of the list. As you can see I added a bottom border for an added effect to separate the content from the title.

There you have it. 3 simple steps. Please visit Six Revisions article about font face.  They mentioned a great tool called Font Squirrel that will give you the necessary files to deal with the different font formats of browsers.

Here is the video tutorial