3 Different Ways to Add Custom Fonts to Your WordPress Site Theme

There are many interesting and customizable ways you can make your WordPress website look more unique and visually appealing. One of the ways is to add custom fonts to your WordPress site. Take a look at some of your competitors’ websites. They may emulate the same tone and style that you also hope to create with your own WordPress website. Pay attention to their use of fonts. Many successful sites tend to use a handful of carefully selected fonts which are used consistently throughout the entire website.

There are so many custom fonts available online for free which you can easily add to your own site. Following finding the right fonts, you will need to know how to go about applying them to your website. There is a range of methods you can try in order to achieve this.

First things first, finding the right font; there are countless sites out there offering thousands of free fonts for you to download. Try Google Fonts, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 Free Fonts, Fonts.com.

In short, there are two main ways to add custom fonts to your WordPress website: manually, or with plugins.

Manually Add Custom Fonts to Your WordPress Site Theme

Adding custom fonts to your WordPress manually can be beneficial if you would rather not risk overburdening your WordPress site with too many plugins. This can be accomplished through editing the @font-face directive. This allows you to connect multiple fonts of any format to your site.

This involves the following steps:

Step 1

First, download your chosen custom fonts from whichever website you have found the most useful. Once the file is saved onto your computer, extract this .zip archive.

Step 2

Following this, you can then upload this font file in your WordPress hosting server under the “wp-content/themes/your-theme-folder/fonts” directory. If you haven’t already set up a designated folder for your custom fonts, create one and save it there.

Step 3

Next, head over to the admin area of WordPress. Select Appearance, and then go to Theme Editor. At this point, you will see the theme’s style.css file on your screen. Underneath this, you will need to add this section of code:

@font-face {
font-family: Aguafina Script-Regular;
src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf);
font-weight: normal;
}

Remember to replace the “URL” and “font-family” in the code with the appropriate values to correspond with your chosen font. You should also paste this section of code at the beginning of the CSS file but after the theme commenting.

Step 4

Finally, make sure you click that important Update File button. This ensures that your changes are properly saved before you leave the page.

Step 5

Following this, you can then easily use the font anywhere else you want to apply it in your theme’s stylesheet. Using the following code:

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

Now that you have edited this font-face code, whenever someone goes on your website the font will load. But you have not yet applied it to any particular element on the page. To do this, you need to make one more final edit to the corresponding style.css file you were just accessing. You will need to input code like the following into the file:

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

Recommended for you: Beginners Guide: How to Install a WordPress Theme?

Quick Note:

Remember, as before, to edit the font-family value to be appropriate to the font you are using.

If, for example, you are using custom typefaces from Google Fonts, you will see that there is a tab named @import, which provides you with the relevant code to simply copy and paste into your theme’s style.css file. This can make the entire process that much simpler if you are not comfortable with dealing with too much coding.

However, this is not a highly recommended method anymore. It has encountered some performance issues, preventing browsers from downloading multiple style sheets at the same time. This results in slower loading pages ultimately. So bear this in mind when you are choosing your fonts and methods for using them.

On the other hand, manual custom font installation through CSS does allow you to connect fonts of a range of formats, including SVG, WOFF, TTF, and OTF. This method also allows you to work without having to rely on third-party services. Your font files will be located on your server. This is the most direct way to add custom fonts to WordPress.

Use Plugins to Add Custom Fonts to Your WordPress Site Theme

Many people choose to use plugins to include their custom fonts to their WordPress sites, as in many ways it can be the simplest method of doing so. This is especially true if you don’t want to deal with the CSS coding. Google Fonts is a popular choice, largely because it can be easily used in tandem with the WordPress plugin. The two best options for you are Easy Google Fonts & Google Fonts Typography. Once you have activated any of these plugins, you will easily be able to access the whole Google Fonts catalog of fonts to add to your pages without having to deal with any complicated code.

Using Google Fonts is the simplest way to do this and you can preview your changes and custom fonts in real-time on the screen.

Depending on which font files you want to use and if you intend on using a single repository or not, you may want to consider using an alternative plugin, like the Custom Fonts plugin.

Step 1

Once you have installed your plugin of choice, and activate it, got to Appearance, and then click into the Customizer page, which will open the live WordPress theme customizer interface page. This is where you will see the Typography tab, which will show you each section of your own site to which you can apply your own custom fonts.

Step 2

Once you have opened this page, you will be able to click on the Edit Font button within the section of the page you want to begin editing. Then you can work through the various sub-sections, selecting the font style, size, margin, etc. – these sections will vary depending on the theme you are using.

Your theme could also mean you will not be able to directly edit your selection of font for various sections of your website. There is, however, a simple fix for this issue: simply head to Settings, then Google Fonts, where you can create your own font controls. To do this, simply enter a Control Name into the box and select CSS selectors. This allows you to add any HTML elements you would like to target for this font. Once you have entered this information, be sure to save your changes by clicking on the Save Font Control button so your settings are fully updated. You can then continue to create as many custom font controls as you will need for each different section of your WordPress website.

Step 3

To use these new font controllers after you have created them, just head back to the Appearance section, click on Customizer, and then click on the Typography tab. Following this, you will see the option labeled Theme Typography – when you click on this, you will be able to access your custom font controls by simply selecting the Edit button so you can choose the fonts you want and the appearance you want for this particular control. Once again, don’t forget to save your changes, by clicking on the Publish or Save button to update your site.

Quick Note:

Some other great custom WordPress font plugins we would recommend are Custom Font Uploader and Use Any Font – but there are countless others to choose from, so explore your options before settling on the one you want to use.

You may also like: 20 Best Selling Micro Niche WordPress Themes.

Finally, Try Using Themes

In addition to these two main methods for adding custom font & typography to your WordPress website, you can also make use of the themes you can choose from. There are numerous themes available, many of which come with built-in options that allow you to customize your installed fonts. The process for doing so will vary depending on the theme you are using. So be sure to look up the appropriate guide to match your theme. High-quality, premium WordPress themes will also offer docs available for online access which provide guidelines for adding custom fonts to that particular theme.

Visual and design elements are arguably one of the most important factors in creating an effective website that will catch the attention of every person who visits it. One of the biggest features within this sphere is the use of fonts. Whichever way you choose to add custom fonts to your WordPress website, you should be finding and using the most suitable fonts for the style, audience, content, theme, and tone of your entire website and brand.

This article is written by Beatrice Beard. Beatrice is a professional copywriter at Academic Brits, who specializes in an impressive range of topics and subject areas. Beatrice is always open to sharing her personal experience and giving expert advice to beginner writers uncovering all of the many challenges and peculiarities of creating high-quality content that really sells.