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 for your WordPress theme as well as with our Upfront theme framework.

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.

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.

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."
This might help you remember the difference between the two font types.

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.

For details on creating a full backup, check out a couple of our other posts: How to Backup Your WordPress Website (and Multisite) Using Snapshot and 7 Top Premium and Freemium WordPress Backup Plugins Reviewed.

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.

It’s ideal to create a child theme first so your changes aren’t lost when your theme rolls out with updates.

If you’re creating a theme from scratch, this isn’t usually a problem, but if you’re editing a pre-existing theme, you can check out a couple of our other posts, How to Create a WordPress Child Theme and How to Automagically Create Child Themes in WordPress, for details on how to make a child 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.

Adding Custom Fonts to Upfront

Upfront is our own infinitely customizable theme framework and you can choose from many pre-made themes by default that you can customize to your heart’s content. You can download Upfront and a theme, then install and activate it so you can add your own fonts.

Adding custom fonts is similar to the steps described above, but there are a few key differences, though, one step that doesn’t change is that it’s important to backup your entire site before adding any new fonts.

Once you have backed up your site, you’re ready to start adding your fonts to your site.

Upload Your Font

You still need to upload your font, but instead of uploading it to your themes folder, you should create a new folder called fonts in the wp-content directory. Your fonts should be uploaded to this new folder, but the way you upload them remains the same as previously described above.

Adding Your Font

When using Upfront, you don’t need to create a child theme because there’s a section where you can add custom CSS and anything you add to it won’t be erased when you update.

The Theme Settings are open.
Add the @font-face rule to the Global Theme CSS editor.

Open your theme in Upfront and go to Theme Settings > Typography > Global Theme CSS on the left-hand side. A segmented section should open at the bottom of the page.

If you need to add something to do with fonts and you can’t see the option in the Theme Settings, you can add any custom CSS to the editor.

The Global Fonts CSS editor is open at the bottom of the page.
Add your custom CSS for fonts in the editor.

While it may be tempting to click the Insert Font button in the editor, this option only adds pre-existing Google fonts with CSS.

Instead, add your code to the Upfront global theme editor in the same way and order you would if you were adding a font to a style.css file.

Similar to the @font-face example shown previously, you would add your font to the Upfront editor in much the same way. The only difference is that you would link to your font that you placed under www.your-site.com/wp-content/fonts/your-font.

Be sure to replace FontName with the actual name of the font you want to add and also swap the URL for the real path to your font. You can also add the @font-face rule for each font weight you need.

Don’t forget to also apply your new font to the elements on your page where you need it to be displayed and you should include it in the Global Theme CSS editor as well. You can define where you want your font to appear in a similar way to the example below:

Change FontName to the actual name of your font and you’re good to go – well, after you click Save at the bottom of the editor.

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. If you run into troubles adding fonts to Upfront, open a support ticket and our support heroes can answer your question lickety-split.

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