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.