Codeable info

Adding Custom Fonts to a WordPress Website

Posted on by in WordPress Tutorials

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 You can also Google font-face kits to find many more sources and fonts, but 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 and click on the link that reads [email protected] kits” in the main top navigation bar.
  2. Chose a font from the ones on the page you are taken to. If you can’t find one you like here or you have a specific font you want to use and can’t find a font kit pre-made for it, then see the section below on alternative methods of installing fonts.
  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"></li>
  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.
  13. 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!

    Alternative method for installing fonts:

    I had a job recently where I had a client give me a font to install on their WordPress blog and I couldn’t find a font kit like we used above. This motivated me to figure out this alternative method for installing fonts. In my case all I had was the regular .otf or Open Type Font file to work with. Here is how to do it starting with just an .otf file. This method came in very handy for me:

    1. Go to and click the browse button to upload your .otf file to the web site.
    2. Then click on the “Convert & Download” button to download a file with your converted fonts to your desktop.
    3. Extract the file onto your desktop.
    4. Create a new folder on your desktop named after the font you are adding to WordPress. In my case, I added Gotham-medium, so I named a folder “Gotham-Medium”.
    5. Open the extracted folder from step two and open the file named “fonts.css”. Copy the contents to your clipboard by selecting the text that looks like the following:

      @font-face {
      	font-family: 'Conv_Gotham-Medium';
      	src: url('fonts/Gotham-Medium.eot');
      	src: local('☺'), url('fonts/Gotham-Medium.woff') format('woff'), url('fonts/Gotham-Medium.ttf') format('truetype'), url('fonts/Gotham-Medium.svg') format('svg');
      	font-weight: normal;
      	font-style: normal;
    6. Paste the text into your style.css file inside your current theme’s main directory. I like to put my additional fonts at the top of the style.css file so they are above any other styles and sure to work.
    7. Edit the text you just pasted. Look for the CSS src: declarations and change any URLs that follow to point to the folder you created in step four above. So in my case, I replaced the fonts/ directory with Gotham-Medium and was all set. Be sure to upload the style.css file back to your theme folder when you are done.
    8. Inside the same folder where the fonts.css file was, open the folder labeled “fonts” and copy all the files over to the new directory you just created in the last step.
    9. Upload your new directory from the last two steps to your theme directory. For example, if you theme is twentyeleven, upload to the folder named twentyeleven or your wp-content/themes/twentyeleven directory.
    10. Now you can just add the following CSS declaration anywhere in your CSS styles where you want to use your new font. Be sure to change the font name according to the font you used and also be sure the name matches what you found in the fonts.css file from above as we did below:

       font-family: 'Conv_Gotham-Medium';

    Fixing Fonts for Internet Explore

    I soon found out the above method was not complete as it didn’t work in IE. In order to work in IE, you must also have a .woff file which the font conversion site above didn’t include in their download. Don’t worry, though, you can go here:

    …and upload your orig. font file as you did before and that site will convert it to .woff for you. Then simply upload the new file to the same folder on your server as before and it will now work in Internet Explorer. Seems like it’s always something doesn’t it?

    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 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.
    That really should about do it. Test it to make sure it works and if not, look for errors in your CSS files. Typically errors are made in the stylesheet.css file or the main style.css file for your theme template.


    Now you have a few different methods you can use to add new and exciting fonts to your own WordPress site. Which method you use will depend on your individual unique situation. I have had to use all three before, so, have fun changing your fonts and Good luck dressing up that WordPress website or blog!

Codeable info

Comments (3)

Comment by Karl says:

Hi Ian,

Have figured it out… Seems the fonts folder/files needs to go in the base “root directory” of the website and not the “theme” folder.

Best regards,


Comment by Karl says:

Hi Ian,

Really enjoyed reading through this article… Well written and easy to read, it inspired me to have a go at setting up a font on our own WordPress website… Though I haven’t been very successful. :(

Basically I’m looking to use one font throughout the website. One font for all makes it easy and clean, we feel.

Have tried to implement what you wrote above to the WordPress theme “Imbalance 2″ but am having a hard time of it.

Did the following:

1. Created a new folder named “sortsmillgoudy-font” under the “imbalance2″ folder in “themes”.

2. Uploaded the following files (which I downloaded from Font Squirrel) into the new font folder named “sortsmillgoudy-font”
i. “GoudyStM-webfont.eot”
ii. “GoudyStM-webfont.svg”
iii. “GoudyStM-webfont.ttf”
iv. “GoudyStM-webfont.woff”
v. “stylesheet.css”

Curiously… Is the “stylesheet.css” meant to go into the “imbalance2″ folder… Or does it stay in the font folder?

This is the content of the “stylesheet.css”

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


Then placed this:

<link rel="stylesheet” href="/sortsmillgoudy-font/stylesheet.css”>

…above the link to our main style sheet in “header.php”… So it looks like this:

<link rel="stylesheet" href="/sortsmillgoudy-font/stylesheet.css”>
<link rel="stylesheet" type="text/css" media="all" href="” />

Obviously I’m doing something wrong somewhere. If you have the time, do you have any pointers as to where I’ve lost the thread?

Kind regards.

Comment by Vanessa says:

Hi Ian!
I named my baby boy Ian, so I like you already. ;0)
This is a great tutorial, and I’m hoping that you can help me out because I think I have done something wrong. I can’t get it to work. Here’s what I did:

1. I created a new folder in my wp-content directory called “fonts.” Then I uploaded my custom font to that.

2. Next I went to and got the code I needed to put into my custom css file.

3. I copied and pasted the code to my css file. I would like this font to appear in the sidebar menu. This is the code I pasted.

@font-face {
font-family: ‘Conv_cacshishonibrush';
src: url(‘fonts/cacshishonibrush.eot’);
src: local(‘☺’), url(‘fonts/cacshishonibrush.woff’) format(‘woff’), url(‘fonts/cacshishonibrush.ttf’) format(‘truetype’), url(‘fonts/cacshishonibrush.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;

I don’t know if you can tell what I’m doing wrong, but I sure would appreciate any input you can provide.


Codeable info