Adding Custom Fonts to WordPress
Whether you’re creating a new site or simply customizing one, custom fonts can help freshen your site style. See how to upload custom fonts
Whether you’re creating a new WordPress theme or simply customizing one, custom fonts can help freshen your site style. See how to upload custom fonts here! 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 and 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 license suitable for 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.
Here’s a quick summary of different types of fonts and their file extensions:
Custom Fonts Types
- 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 resources 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.
Adding Custom Fonts to WordPress
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.
It’s best to add it to your theme folder, 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.
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.
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 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 for creating 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. Still, if you’re editing a pre-existing theme, you can check out a couple of our other posts
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.
Extra Tip
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 font’s purpose.
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. 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 add 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.
Add the@font-facerule 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.
Suppose you need to add something to do with fonts and can’t see the Theme Settings option. You can add any custom CSS to the editor.
Custom Fonts CSS
Add your custom CSS for fonts in the editor. While it may be tempting to click the editor’s Insert Font button, 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 to add a font to a style.css file. Like the 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 the font that you placed under www.your-site.com/wp-content/fonts/your-font.
Be sure to replace FontName with the font’s actual name, you want to add and also swap the URL for the real path to your font. You can also add the rule for each font weight you need.
Don’t forget to apply your new font to your page’s elements where you need to appear. 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:
Finally, change FontName to the actual name of your font, and you’re good to go. So, 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, many plugins 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 trouble 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.
