How to Quickly Add Custom Font to a WordPress Site

Another important element of web design is typography because users mainly look at it while they read. You can explore it more by not using the default yet boring fonts (like Arial or Times New Roman). Luckily, you can add custom font to your WordPress site!

Where to Find the Right Font

There are plenty of fonts out there that you can use for free. For instance, you may explore Hypefortype, TypeKit, and FontSquirrel  that provide you lots of fonts you can download freely to modify your website’s typography. It’s important to choose the right font for your website and check the licensing of the font because some fonts might be premium where you have to buy it first in order to use it.

When downloading the web fonts, you will see a variety of font format. They depend on the browser to use, which are:

  • TrueType Font (TTF): This font is compatible with Internet Explorer version 9.0 and above, Chrome from version 4.0, Firefox starting at 3.5, Safari from version 3.1 and Opera from version 10.0.
  • OpenType Font (OTF): This font is the evolution of TTF and has the same browser compatibility as TTF.
  • Web Open Font Format (WOFF): This font type is supported by Internet Explorer version 9.0 and above, Chrome starting at 5.0, Firefox from version 3.6, Safari from version 5.1 and Opera from version 11.1
  • Web Open Font Format 2.0 (WOFF2): It is the next generation of WOFF, but only supported by Chrome version 36.0 and above, Firefox starting at 35.0 and Opera with 26.0
  • Embedded OpenType Font (EOT): Only available for Internet Explorer version 6.0 and above
  • Scalable Vector Graphics font (SVG): This font type is only compatible with Safari for iOS version 4.1 and below.

I suggest you use the TTF, OTF, or WOFF format as they have more browser compatibility than others.

Adding Font to Your Site

Adding fonts to your computer is pretty easy, but adding custom fonts on your site is a bit more complicated. You have to go to your cpanel, admin panel and making changes in theme files functions.php and style.css or adding custom CSS of your own. While on computers you can simply download the font file to fonts directory.

Thankfully, WordPress always simplify our work with its plugins. The plugin I recommend you to add custom font is Use Any Font. Here are the steps:

1. Download font file you want to add on your site. Note that the font format you can download are TTF, OTF, and WOFF. For example, I download a TTF font.

2. Install Use Any Font plugin on your WordPress. You can also navigate to Plugins > Add New on your WordPress dashboard, then search for Use Any Font. Install and activate it.add custom font


3. Create API Key to start using the plugin. You can create the API Key here by entering your name, email, and your donation. You can choose 0$ if you want to use it for free.add custom font 2


4. After clicking Submit button, you will get your API Key. Copy the API Key.add custom font 3


5. From your WordPress dashboard, navigate to Use Any Font main menu. Enter your API Key in the available box, then hit Verify button.add custom font 4


6. On the same page, click Add Fonts button on Upload Fonts Field to upload your custom font.add custom font 5


7. Enter the font name and browse for your font file. Click Upload.add custom font 6


8. From Assign Font Field, you can set the font to the element that you want after clicking Assign Font. Select the font first then choose which element you want the font for. For instance, if you want to use the custom font for h1, simply check h1. Click Assign Font button once again.add custom font 7


9. Done! Your site has the fresh font to show.     add custom font 8


Adding custom fonts to WordPress is that easy and quick!

Custom fonts can make a huge difference to your website as they can make your content to shine even more. But you have to remember to use no more than 2-3 custom fonts on your site at a time. Too many custom fonts can slower the load time which can be a bad user experience. That’s why you should choose your font wisely.

Which font are you using on your website now?



  • Comments ( 0 )

  • Leave a Reply

Your email address will not be published. Required fields are marked *