WordPress Custom Fonts

One of the biggest problems with fonts is that if the person visiting your site doesn’t have them installed on their local machine, they won’t see them. This can cause issues because you never know what font it might get replaced with and what it could look like for each visitor. In this tutorial we will show you a great solution to using custom fonts on a WordPress site. The way we do it, your visitors do not even have to have the fonts on their computers. Everyone will be able to view the font they were intended to!

Why Custom Fonts?

Well, as a developer working closely with designers, I can tell you that they can be very particular with their fonts. They want the exact same font they used in their Photoshop layout or other mockup image. As a developer, it is your job to make a site look exactly like your client wants and that often involves custom fonts. Therefore if you want to be professional, you should know how to use custom fonts for your WordPress clients as well. Custom fonts ensure that all your visitors and clients will see the same fonts you see when looking at the page. There are only a dozen or so well supported fonts across the web so unless you are using one of them, you need custom fonts. Even using a well supported font such as Arial has no guarantee because a user could have taken that font off of their computer.

Installing Font-face Kits in WordPress

Below are some easy to follow steps to install your own custom fonts into any WordPress blog or site. In this exercise we use what are called font-face kits from fontsquirrel.com. You can also Google font-face kits to find many more sources and fonts, but fontsquirrel.com seems to be the leading online provider of them at the moment. They have hundreds of fonts to choose from and even allow their visitors to manufacture their own kits by uploading custom fonts and further customizing them on their site.

Here is how to install fonts using this easy to use twelve step method:

1. Go to fontsquirrel.com and click on the link that reads “@fontface kits” in the main top navigation bar.

2. Chose a font from the ones on the page you are taken to.

3. Click on the download link for that font that reads “Get Kit”.

4. Using an FTP client such as FileZilla, go to your WordPress directory and locate the folder wp-content/themes/your-current-theme/

5. Inside your theme folder, add a new folder named after the font you are adding. We added a font named “Lane” and named our folder Lane-font.

6. Extract the zip file you downloaded in step three above and open the extracted folder.

7. Select all the files inside the folder you just extracted and upload them to your new directory in your theme’s folder. You are uploading the files only, not the containing folder. If you see the file named “stylesheet.css” you are in the right place.

8. Now you need to link to the stylesheet.css file you just uploaded from your header.php file in your theme’s directory.

9. In your main theme’s directory download the header.php file do your desktop using your FTP client. Open it in notepad and a link to the styelsheet.css file. Locate the link to your main style sheet in header.php and place the new stylesheet.css link just above it like this:

<link rel="stylesheet”  href="<?php bloginfo('template_directory'); 

?>/Lane-font/stylesheet.css"

10. Upload the altered header.php file back to your theme’s directory replacing the original file as you do so.

11. Now, in the new font’s folder, find the stylesheet.css file again and open it to find how to call your font. You are looking for a section of code that looks like the following but that has your fonts name in it.

Our font was called Lane Narrow Regular so the code we needed to find was:

@font-face {
font-family: 'LaneNarrowRegular';
src: url('LANENAR_-webfont.eot');
src: url('LANENAR_-webfont.eot?#iefix') format('embedded-opentype'),
url('LANENAR_-webfont.woff') format('woff'),
url('LANENAR_-webfont.ttf') format('truetype'),
url('LANENAR_-webfont.svg#LaneNarrowRegular') format('svg');
font-weight: normal;
font-style: normal;
}

What you are searching for is the font-family declaration. In the above code it reads: “LaneNarrowRegular” which is the font we are installing. The text we want immediately follows the text: “Font-family: “. Copy the “LaneNarrowRegular” font name and use it in your font-family declarations to call the font wherever you need to use it from now on.

12. Open your theme’s main style sheet and add the font-family tag with your font’s name wherever you want the new font to appear.

That is all there is to it. A dozen simple steps and you have a font that hardly anyone online will be using because it isn’t supported by most users’ computers. That no longer matters because we linked to it. It will work on any computer that uses your site now!

Replacing Fonts Manually

Okay some of you might be saying what if we have a font from another site we want to use but don’t have the neat little package from fontsquirrel.com? Well, we have a solution for that too!

Here is what you would do:

1. Find the font file folder of the font you want to use. Make sure it has the True Type Font file types of WOFF and EOT. Copy the font files to a new WordPress directory, such as wp-content/themes/your-theme/your-font-name

2. Go to the main style sheet on the site you copied the font from and locate the font-family CSS declaration for that font similar to how we did in the first exercise of this tutorial in step #11 above. Copy the font family line and paste it into your theme’s style sheet wherever you want to use the font.

3. Create a stylesheet.css file to upload to the same folder that has your new font files from step one.

In this file you want to put something like this for each font you use:

@font-face {
    font-family: 'ult';
    src: url('ult.eot');
    src: local('?'), url('ult.woff') format('woff'), url('ult.ttf') 

    format('truetype'), url('ult.svg#webfontbbTsnDCi') format('svg');
    font-weight: normal;
    font-style: normal;
}

You should be able to find a similar section in the site’s CSS files somewhere that you copied the font from. Look for it and copy it or use our example but be sure to change the URLs so they are correct according to your file system.

(source: wphub.com)