How to Add Custom Fonts to WordPress
access_time
hourglass_empty
person_outline

How to Add Custom Fonts to WordPress

There are countless ways how to make your WordPress site look more eye-pleasing. One of them is by adding custom fonts so your WordPress website.

However, the choice of WordPress fonts can be limited and theme dependent. In this article, you will learn how to add custom fonts to WordPress both manually and by using plugins.

Where to Download Fonts for WordPress?

There are numerous sites where you can find free web fonts, and Font Squirrel is one of them. You can easily find free fonts that are licensed for commercial work. Other than that, Google Fonts has over 900 font families, and Edge Web Fonts, provided by Adobe, offers a vast collection of web fonts.

If you’re looking for something more suited for personal use, check out sites like Fonts.com, DaFont, and 1001 Free Fonts.

Converting Fonts to a Web-Friendly Format

It is worth mentioning that not all web browsers support every custom font. Nevertheless, even if your chosen font is unsupported, you can still convert it to a compatible format.

Before converting fonts from one format to another, let’s have a quick look at different font formats:

  • Open Type Fonts (OTF) – the most commonly used web fonts and are a registered trademark of Microsoft. This format works well with almost all major browsers.
  • True Type Fonts (TTF) – developed by Microsoft and Apple in 1980. Widely used for both Windows and macOS.
  • Web Open Font Format (WOFF) – broadly used format for web pages and recommended by the World Wide Web Consortium (W3C).
  • WOFF 2.0 – considered a better option than WOFF 1.0 due to better compression abilities. This format is not supported by Safari and Internet Explorer but works well with Google Chrome, Firefox, or Opera.
  • Embedded OpenType Fonts (EOF) – more compact OTF fonts, used as embedded fonts on web pages. All major browsers support EOF.

If you’re not sure if your font is compatible with your default browser, use the Web Font Generator. This tool allows you to convert almost any font to a web-friendly format easily:

  1. Go to Webfont Generator.
  2. Click the Upload Fonts button and choose a font that you want to convert,
  3. Tick the box in the Agreement section to state that your fonts are legally eligible for web embedding.
  4. Press the Download Your Kit button and save the .zip archive to your computer.
    Converting fonts to a web friendly format using Webfont Generator
  5. Inside the archive, you will find fonts in WOFF and WOFF 2.0 format along with CSS files and demo HTML page.

How to Add Custom Fonts to WordPress?

Here’s how you can add custom fonts to WordPress, adding one manually or by using plugins.

How to Manually Add Fonts to WordPress

If you don’t want to overburden your WordPress with plugins, you can add fonts to your website manually. You have to upload your font to your hosting account and edit your theme’s CSS file.

  1. Download the font that you want to use to your computer and extract the .zip archive is necessary.
  2. Upload your font file to wp-content/themes/your-theme/fonts directory. Create a separate fonts folder if you don’t have one yet. You can use an FTP client like FileZilla or Hostinger’s File Manager for this task. In our example, we have uploaded AguafinaScript-Regular.ttf font using the File Manager in hPanel.
    Manually uploading fonts using Hostinger's File Manager
  3. Head to the WordPress admin area. Then, go to Appearance -> Theme Editor. You’ll be presented with the style.css file. Scroll down and add the following code.
    @font-face { 
    font-family: Aguafina Script-Regular; 
    src: url(http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf); 
    font-weight: normal; 
    }

    Don’t forget to change font-family and URL values to match your font.

    Updating style.css file using the Theme Editor in WordPress

  4. Press the Update File button to save your changes.

Remember, the font-face code loads the font every time a visitor visits your website. However, the font is still not applied to any element yet.

To assign the font for a specific element, you need to edit the same style.css file. For example, the following code would apply Aguafina Script font to our website’s title.

.site-title { 
font-family: "Aguafina Script-Regular", Arial, sans-serif; 
}

Here’s the final result:

Aguafina Script font example in WordPress

How to Add Fonts in WordPress using Plugins

Using plugins is probably the easiest way for the task. Here are some of the most popular options out there:

WP Google Fonts

WP Google Fonts offers you the freedom to use custom fonts and apply them to particular CSS elements.

Install the WP Google Fonts plugin from the WordPress plugin directory and open the Google Font Control Panel through your WordPress dashboard. Here you can select fonts and change various settings such as font style, assigned elements, etc.

Using the WP Google Fonts plugin

Easy Google Fonts

With Easy Google Fonts, you can use any theme and preview any font in real-time. It’s also simple to use since no coding skills are required.

Once you’ve installed and activated the plugin, you can edit and manage font settings by accessing Settings -> Google Fonts. If you want to tweak your theme’s typography right away, enter your WordPress Customizer by clicking Appearance -> Customise. Next, you can start customizing in the Typography section where you can manage fonts on any part of your site.

Use Any Font

Use Any Font is another excellent plugin that can help you add several fonts to your WordPress website. Once installed, create a free API key and press the Verify button.

After the verification is complete, you will be able to upload fonts in TTF, OTF, and WOFF formats. Use Another Font allows you to assign fonts to custom elements as well.

Using the Use Any Font plugin

Conclusion

You learned how to download and convert fonts into a web-friendly format. You also discovered two ways how to add custom fonts to WordPress. Whichever fonts you choose, make sure that it’s suited with your site’s theme and style.

If you have any questions regarding how to add fonts to WordPress, share your thoughts in the comment section below!

The Author

Author

Domantas G. / @domantas

Domantas leads the content and SEO teams forward with fresh ideas and out of the box approaches. Armed with extensive SEO and marketing knowledge, he aims to spread the word of Hostinger to every corner of the world. During his free time, Domantas likes to hone his web development skills and travel to exotic places.

Related tutorials

Author

Molly Reply

September 25, 2019

How do you create a free API key for Use Any Font?

    Author

    Domantas G.

    Replied on September 26, 2019

    Hey Molly, You can get Google API for fonts here: https://developers.google.com/fonts/docs/developer_api

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a part of Hostinger now!

More in WordPress
How to Add Google Analytics to WordPress

Close