How to Add Fonts to Your WordPress Website

by [email protected] on February 4, 2019

Do you want to add fonts to your WordPress site? Learning how to add custom fonts is all but necessary for creating a unique, well-branded website. Whether you plan on using free fonts or purchasing premium ones, you have a lot of options here. Getting a font onto your site is usually fairly easy, so let’s go over a few of your options.

Method 1. Upload Fonts Manually
Method 2. Use a Plugin
Method 3. Web Fonts

Method 1. Upload Fonts Manually

There are a lot of ways to upload fonts to your website, but which you choose depends on how you got your font: did you download it, or did the font library give you a piece of code to use?

If your font is hosted by a font repository (there are HTML and CSS code you can place in your website), skip to Method 2.

If you downloaded the font off the internet, you’ll need to host it yourself. Make sure the font’s license allows you to host the font and use it commercially. Your font needs to be in web font file format (OTF, TTF, or WOFF), or you can use a web font converter online to convert it.

Upload the font via FTP and place it in the fonts folder. If you don’t have one, make one under wp-content » themes » Your Theme.

Now open your style.css file, or style sheet, under wp-content > themes > Your Theme and use this code.

@font-face {

 font-family: NameOfFont;  

 src: url(public_html/YourSite/wp-content/themes/YourTheme/fonts/FontName-Regular.ttf);  

 font-weight: normal;  

}

Make sure to replace the file path with the actual names from the files and font. Now your font is usable on your website via CSS. You’ll need to add it to body, paragraphs, headings, etc. as outlined here.

Method 2. Web Fonts

Some font repositories provide hosting for their fonts, so you don’t need to upload and host it on your website yourself. Examples are Google Fonts and Adobe Fonts. Sometimes it’s as easy as just copying a bit of CSS. Other times, you’ll need to modify your header file too.

Copy the HTML you’ve been given and access your site via FTP. Find your header.php under wp-content/themes/YourTheme/header.php and edit it. Just paste the HTML you’re given somewhere between the start and end <head> brackets.

If your theme allows you to access the header.php from the backend, you can do that instead.

With that done, you can then specify in CSS where you want the font to be used. Here’s an example with Google Fonts.

Method 3. Use a Plugin

If all this is a bit overwhelming, your best bet might be to use a plugin. There are a variety of plugins out there that can help you get all sorts of free fonts onto your website, without all the hassle of FTP.

You have a lot of options here, but some of the most popular three are Easy Google Fonts, Typekit Fonts for WordPress, and Use Any Font.

Easy Google Fonts allows you to add Google’s free font library to your WordPress site, no coding necessary. The over 600 fonts and font families are available for use, and any that are added to Google Fonts also become available immediately!

Typekit Fonts for WordPress works similarly, but using Adobe Fonts instead. You’ll need a Typekit account, and to do a bit of CSS styling. But if you just love the fonts on Typekit/Adobe Fonts, this plugin is a must-have.

Finally, Use Any Font allows you to use custom fonts you downloaded yourself, rather than select from a list of fonts. Just upload your web font files and you’re ready to use them on your website! No messing with FTP.

Adding Custom Fonts to WordPress

The default fonts that come with WordPress and on your computer make great body fonts because they’re readable and practical. But if you want to add a touch of originality to your website, try downloading unique fonts to use in your logo, header, or other areas of your site. You’ll be surprised at the effect!

Was this tutorial helpful? Leave us a follow on Facebook or Twitter for more!