Adding Custom Fonts to a WordPress Site Manually

During WordCampUS, I heard that Google Fonts is coming to WordPress! Up until now, developers and users had to install a plugin to access Google Fonts and apply them to their sites. Google Fonts is a free and open-source collection of fonts provided by Google. It allows web designers and developers to easily access and use a wide variety of fonts for their websites and other digital projects. Fonts can make or break a website. (Just ask my husband about his hatred for Comic Sans.)

This week, I was building a redesigned static page as a WordPress site for Center Centre for their How to Win Stakeholders & Influence Decisions program. Adding a custom font to a static site is simple, but I found it to be slightly more challenging than expected when I attempted to add a custom font to the new WordPress site. This custom font was not a Google Font and it wasn’t part of the WordPress stock font options. There were a couple of solutions.

I downloaded the Any Font plugin. The plugin requires the user to activate it and get a free API key to connect to server for font conversion. Then, it allows the user to upload/add the custom font and assign it to elements. For some reason I couldn’t determine, this did not work for me and I decided to try a different plugin. I tried the Custom Fonts plugin. Once again, I struggled to get the plugin to work for me. With 300k installations and 4.5 star rating, I felt that this should’ve been significantly simpler.

I decided to break the process down into simpler steps after reading an article on Hostinger: How to Add a WordPress Custom Font on Your Site. Hostinger provides three alternatives: manually adding the font, using the plugin Easy Google Fonts, or Use Any Font (which I already tried). I wanted to try adding the fonts manually. I followed Hostinger’s suggestions and adding the fonts worked perfectly.

In this video, you can watch the process of adding a custom font to your WordPress site.

I enjoyed learning more about the options for adding custom fonts on a WordPress site. I could’ve chosen to use a plugin and worked through the problems I was having with these, but ultimately, having less plugins on a site is increases performance, compatibility, security, and maintenance. The custom font looks and works great, and it doesn’t negatively affect my site’s performance.

Adding Custom Fonts to a WordPress Site Manually
  1. Create a fonts directory in your site’s theme directory
  2. Add the font files (.otf, .ttf, etc) to the fonts directory
  3. Access your Editor in you WordPress dashboard and go to the page containing the text you want to apply the font to
  4. In Styles -> Additional CSS, add the @font-face rule:

    @font-face { font-family: FontName-Regular; src: url(; font-weight: normal; }
  5. Either add a class to the text you want to apply the font to or select the section heading
  6. In Styles -> Additional CSS, apply the font-family using the font name you created in the @font-face rule:

    .className { font-family: “FontName”, serif !important;
  7. Save the page and you should see the changes on the front end.

Leave a Reply

Up ↑

%d bloggers like this: