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.

• Finding a Font
• Uploading Your Font
• Adding Your Font to Your Theme
• Conclusion

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 license 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.

This might help you remember the difference between the two font types.

The amusing image below 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.

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 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. If you run into troubles adding fonts, 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.

Tags:

• fonts