How to add new fonts in WordPress

In this guide, we will tell you how to add new fonts in WordPress.

Let's face it, we all love blogs and websites with wisely chosen fonts. They not only make the entire site attractive but also hook the user with their content.
However, the choice of WordPress fonts is limited and depends on the theme you are using. The good thing is that you can add custom fonts to WordPress manually or by using some plugins that we will see here.

Choose the font to use in WordPress

There are several websites from where you can get free web fonts. For example, Google Font Service is a free font service provided by Google and has fonts in more than 135 languages. Edge Web Fonts, on the other hand, is a free font service provided by Adobe that features its extensive collection of web fonts. You can also try Typekit, a free library of thousands of web fonts, along with Fonts.com, which claims to provide over 150.000 web and desktop fonts.

Now that you've found the font you want to use on your website, it's time to check its formatting. We must make it clear that not all existing fonts are compatible with web browsers. But don't worry, even if the chosen font is not supported, you can still convert it to a supported format.

It is convenient that before converting fonts from one format to another, let's take a quick look at the different font formats.

Open Type or open type fonts

Abbreviated as OTF, these are the most commonly used web fonts and are a trademark of Microsoft. They work well with almost all major browsers.

True Type fonts

Also known as TTF, these fonts were developed by Microsoft and Apple in the 1980s and are widely used for Windows and Mac operating systems. They are supported by all major browsers.

Web Open or open source web sources

WOFF fonts are widely used on web pages and are recommended by W3C. These sources are the most used in web design because they are mainly supported by all browsers.

WOFF 2.0

WOFF 2.0 fonts have an advantage over WOFF 1.0 due to their better compression capabilities. They are not compatible with Safari and Internet Explorer, but work well with Google Chrome, Firefox and Opera.

Embedded Open or embedded open type fonts

These types of OTF fonts are compact and are used as embedded fonts on web pages and are supported by all major browsers.

If you've found the font you want to use on your WordPress website, but you're not sure if it's compatible with all browsers, use the Web Font Generator tool. This tool allows you to easily convert any font to a web-friendly format:

1. Access the tool Web Font Generator.
2. Press the Upload Fonts button to upload your font and agree that the fonts are legally suitable for web embedding.
3. Press the Download button and save the .zip file to your computer.
4. Inside the .zip file you will find the fonts in WOFF and WOFF 2.0 format along with the CSS files and the demo HTML page. These font formats are supported by almost all browsers.

Add new fonts in WordPress via plugins

Plugins are probably the easiest way to add fonts in WordPress. Here are some of the most popular plugins listed below:

WP Google Font

You can easily add fonts to your WordPress website using the plugin WP Google Font for sources. This plugin automatically includes the code needed to add the new fonts to your WordPress site. It also provides the freedom to use custom fonts in specific CSS elements by the WordPress admin.

Simply install this plugin from the official WordPress plugin directory and open the new section that will be created in the WordPress dashboard: Google Fonts. The Google Fonts Control Panel will appear, i.e. the settings page. Here you can select fonts and change various settings such as font style, assigned elements, etc.

Use any font

If you want to add any font use Any Font is another plugin through which you can add fonts to your WordPress website.

You can install this plugin from the official WordPress plugin directory. Once the installation is complete, go to the Use any source section and create a free API key and press the Verify button.

Once verification is complete, you will be able to upload fonts in TTF, OTF, WFF formats. The plugin also allows you to assign fonts to custom elements.

Add new fonts in WordPress by hand

If you don't want to overload your WordPress with plugins, you can manually add feeds to WordPress. The process is quite simple: you need to upload the fonts to your hosting account and edit the theme's CSS file.

1. Follow these instructions on how to add new fonts in WordPress:
2. Download the font to your computer.
3. Typically, you'll find the font files in a .zip file. Unzip them.
4. Now you need to upload the fonts file (you can use FTP client or File Manager for this) to the wp-content/themes/your-theme/fonts directory (you have to create the fonts folder yourself if it doesn't exist). In our example, we load the font AguafinaScript-Regular.ttf.
5. Now you will go to the WordPress administrative area and open Appearance -> Editor. Go to the style.css file. Scroll to the bottom of this file and add the following code (don't forget to change the font family and URL values ​​to match your source):

@ font-face {
font-family: Aquafine Script-Regular;
src: url(https://www.b-fast.it/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf);
font-weight: normal;
}

Press the Update File button to save the changes.

The font-face code loads the font every time a visitor enters your website. However, the font is not yet applied to any elements. Therefore, you won't see any changes on the front-end. To assign the font to a specific element, you must edit the same style.css file.

For example, to assign that font to your title (h1) simply type

h1 {
font-family: “Aquafina Script-Regular”, Arial, sans-serif;
}

Conclusion

I hope this tutorial has helped you know how to add new fonts in wordpress.
For those who are not familiar with CSS, we recommend using the plugin method as it is a simpler method and does not require any other implicit coding knowledge.