Adding Custom Fonts to WordPress with @Font-Face and CSS3

Whether you’re creating a new WordPress theme or simply customizing one, custom fonts can help freshen your theme’s style.

While browsers have built-in default fonts, which you can call in your style.css file, using the same fonts everyone else uses can seem a bit dull.

Luckily, adding your own choice of fonts is relatively easy using the CSS3 @font-face rule. All that’s required is uploading a font to your server, then adding it to your theme with a few small snippets of CSS.

Let’s look at how to do it.

Finding a Font

There are many places to find great web fonts for free such as FontSquirrel or Adobe Edge Web Fonts. Just make sure the font you choose has a licence suitable to your needs.

Not all free fonts can be used for commercial purposes, but you can buy premium fonts for commercial use from many places such as Typekit.

A letter "S" in a serif font with a hole at the part of the top end that is curled over the edge. The caption reads, "I shot the serif."
A serif font.

There are also two main kinds of fonts: Serif and sans-serif. Serif fonts have curls over the edges while sans-serif fonts do not.

The amusing image to the left might help you remember the difference between the two types.

Once you have chosen your new font, you need to download its file. Keep in mind that there are different kinds of font files and they aren’t all compatible across most major browsers.

Here’s a quick summary of different types of fonts and their file extensions:

  • TrueType Font (TTF) – Compatible with Internet Explorer version 9.0 and above, Chrome starting at 4.0, Firefox at 3.5, Safari since 3.1 and Opera beginning with 10.0
  • OpenType Font (OTF) – Has the same browser compatibility as the TrueType Font
  • Web Open Font Format (WOFF) – Supported by Internet Explorer version 9.0 and above, Chrome starting at 5.0, Firefox at 3.6, Safari since 5.1 and Opera beginning with 11.1
  • Web Open Font Format 2.0 (WOFF2) – Supported only by Chrome since version 36.0, Firefox starting at 35.0 and Opera with 26.0
  • Embedded OpenType Font (EOT) – Exclusively available for Internet Explorer version 6.0 and above.

The Web Open Font Format has become the standard since the fonts are compressed to consume less of your bandwidth and contain extra metadata. Unfortunately, they’re not always available to download.

If you’re having trouble finding this kind of file, TrueType and OpenType fonts are more readily available for download and are still great choices.

Uploading Your Font

Once you’ve found the font you wish to use and followed your source’s instructions for downloading the file, it’s time to upload it to your server. Before you do, it’s a good idea to backup your entire site before making any changes.

It’s best to add it to the folder of your theme, which can be found under wp-content > themes > your-theme. You could optionally create a “Fonts” folder to house your file to keep things organized, especially if you plan on adding more than one font.

Unzip the packaged file and upload the contents to your theme folder.

In cPanel, click the File Manager button under Files on the main page. If a pop-up opens, select your site’s location followed by the Go button. Navigate to your theme folder and click the Upload button at the top of the page.

A screenshot of the "Upload Files" page in cPanel. The upload file path is highlighted.
You should be able to keep the file permissions to 644 and not run into any issues. If you receive a permission error, try deleting the files and uploading them again with different permissions.

Click the Choose file button on the Upload Files page and choose the font files from your computer. Once selected and opened, the files will upload automatically without clicking another button on this page.

No matter where you place your font file, you need to remember its file path. It will be listed on this page in bold after the words Select files to upload to.

Adding Your Font to Your Theme

To allow your uploaded font to actually appear in your theme, you need to call it in your style.css file, which you can find under wp-content > themes > your-theme.

In cPanel, select the file, then click the Edit button at the top of the page. If you haven’t previously disabled pop ups, one will appear. If this is the case, click Go at the bottom.

Copy and paste the following code into the file, ideally somewhere where fonts are referenced. Make sure there is a line break in between each block of css and the code you enter.

Don’t forget to replace the font name with the one you uploaded and update the code to reflect the correct the file path.

Add the same CSS code additional times to define bold, italicized, header text and the like, keeping sure you update the file name and path to reflect the purpose of the font.

Finally, define where your font will be used with some more CSS, such as in the example below:

In this example, all paragraph text will use the new (fictitious) font. Once you update this code to your own specifications and save the file, your new font will be viewable on your site.

Conclusion

With these instructions, you should be able to add new fonts to your theme without error. Still, there are many plugins that can help you add fonts without any coding if you would prefer an easier solution.

In fact, we already listed the best ones in our post Top WordPress Custom Fonts Plugins Reviewed. If you would like a handy guide to choosing the right font, we have a post for that, too: Most of What You “Know” About WordPress Typography is Wrong.

For more information on using fonts in WordPress, check out the Codex: Playing with Fonts.

What are your favorite fonts? How have you added them to your site? Let us know in the comments below.

Image credit: Tom Gabor.

16 Responses

    TW

    Thanks, Jenni – this is a very good and straightforward guide overall. However, there is one little detail missing that makes all the difference. The second line in the @font-face rule needs to begin with “src:”, like so:

    src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf);

    With that addition, everything works perfectly!

    Thanks again and keep up the good work.

    Best,
    TW

      Jenni McKinnon

      Hey TW,

      Talk about forgetfulness! Thanks so much for noticing. I made edits to the article to reflect the change.

      You’re a star!

      Thanks again,

      Jenni McKinnon

      Jenni McKinnon

      Hey Reshma,

      At what part did you get stuck? Do you encounter any error messages? Did you make sure you entered in the correct file paths? Yours may look different than the examples in this article.

      Do you think you could be a bit more specific about the steps you took or what went wrong? It’s difficult to know what went wrong when I can’t see your files. If you can give me a few more details, I may be able to help you better.

      Cheers,

      Jenni McKinnon

    Daniel

    Hi

    Really good post. Out of interest do you have to use an absolute path to the fonts? I use a relative path for say images : “images/help.png” so the syntax is confusing.

      Jenni McKinnon

      Hey Daniel,

      Yes, you can definitely use a relative path since the font is located on your server.

      Cheers,

      Jenni McKinnon

    Andrea

    Hello Jenni,
    sorry I am a total beginner regarding CSS and anything webrelated…
    I wanted to upload a font to my WordPress site but it didn’t work. I used the Webgenerator from Fontsquirrel and uploaded the woff-file in my child theme. Then I added the @font-face css to my custom css in my child theme but I think I am doing something wrong with the url-source.
    Let’s say my site is called http://www.mysite.com
    What exactly would the css be? This:

    @font-face {
    font-family: ‘happy_foxcondensed';

    src: url(‘html/mysite.com/wordpress/wp-content/themes/theme_child/fonts/happyfox-condensed-webfont.woff’) format(‘woff’);
    font-weight: normal;
    font-style: normal;
    }
    did not work…
    Again, I am a beginner and would greatly appreciate your help ;)

    Thanks,
    Andrea

      Jenni McKinnon

      Hey Andrea,

      How about trying that code without the quotations, like so:

      @font-face {
      font-family: happy_foxcondensed;
      src: url(html/mysite.com/wordpress/wp-content/themes/theme_child/fonts/happyfox-condensed-webfont.woff);
      font-weight: normal;
      font-style: normal;
      }

      Don’t forget to assign the font to an element in your style.css file. See the second code snippet in this article for an example. :)

      Let me know if you need any more assistance.

      Cheers,

      Jenni McKinnon

    Irfan ud din

    I’m using rlt theme and i want to use ” Jameel Noori Nastaleeq” (Urdu language Fonts) font on my wordpress site contains rlt them.
    I tried it few times but not succeeded.
    Need your help.
    Thanks

      Jenni McKinnon

      Hey Irfan ud din,

      Have you added the font with the @font-face rule as well as defined it in your style.css file (as shown in the second code snippet example)? You need to do both those steps in order for the font to be displayed.

      If can confirm you have done this, but it’s still not working, it might have to do with the code you entered. Could you reply with the code? You can paste it in http://pastebin.com/ then add the link here since not all code shows up in the comments sometimes.

      Cheers,

      Jenni McKinnon

    Jadesjems

    Hi Jenni!

    Thanks for this simple tutorial. I’m not quite sure how or where to use this code:
    p {
    font-family: FontName;
    }

    I did everything else correctly. Any advice?

    Thanks! Jade

      Jadesjems

      Also, I should probably mention that I’m using a wordpress theme, Mystile Child theme, and it hasn’t shown up as an option in any typography places within my theme. It’s not a blog, it’s an ecommerce store, so I don’t have any paragraphs to add that code to.

      Thanks!

    Rula

    I’ve uploaded FuturaLTBT onto my server, but for some reason the font is not applied. This is what I have in the custom CSS part of my theme (Muse).

    @font-face {
    font-family: FuturaLtBt;
    src: url(public_html/wordpress/wp-content/themes/base-wp/fonts/FutuLtBt.ttf);
    font-weight: normal;
    }

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,body,a,p {
    margin: 1.25em 0 0.2em;
    font-family: ‘FuturaLtBt’, sans-serif !important;
    }

    Asa

    Hi, I Tried this, but it did’nt work :(
    My CSS is like this:
    @font-face {
    font-family: Noter;
    src: url(public_html/http:/www.fyraf.se/wp-content/themes/shape_twentyeleven/Noter.ttf);
    font-weight: normal;
    }
    h6 {
    font-family: Noter;
    }

    what can be wrong with this?

    /Åsa

Comments are closed.