The Most Elegant Way To Add Custom Fonts On Your WordPress Website

If you are a WordPress developer or even a normal user trying to build your blog in WordPress, you might have come across this situation – Adding a custom font to your WordPress website. A tricky situation where you bought a font or the font you like is not on Google Fonts or TypeKit. And of course, you tried to use a plugin but turned out to be quite bulky. Or even trying to upload to media and call it in a stylesheet. *signs* Yea, as if most hosting services are gonna let you upload un-permitted files in Media.

So, how do we go about this? What’s the most straightforward way to implement this? – With a plugin of your own. Of all the solutions out there, this is the simplest one. You do exactly the same as those bulky plugins do, without the bulk – the settings and the upload interface and the assigning…

For the sake of example, Im going to use Roboto & Poppins as the fonts to add to our website.

Lets create a plugin.

The structure of the plugin is;

▼ jj-custom-font
    jj-custom-font.php
    ▼ fonts
        roboto.woff2
        poppins.woff2

<?php
/**
Plugin Name: Custom Fonts
Plugin URI: https://jyothisjoy.com/
Description: This plugin is for inserting custom fonts via CSS
Version: 0.1.0
Author: Jyothis Joy
Author URI: https://jyothisjoy.com
License: GPL2
Text Domain: jj_custom_font
Domain Path: /languages
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
**/

if ( !function_exists( 'add_action' ) ) {
echo 'Hi there! I\'m just a plugin, not much I can do when called directly.';
exit;
}

This is the most minimal code you need to write to create a plugin. Save it as your-plugin-name.php The code on the bottom is so that no one can directly execute the file by calling the file name.

add_action('wp_head', 'jj_custom_font_insert_font_family');

function jj_custom_font_insert_font_family(){
?>
   <style>
       @font-face{
           font-family: Roboto; 
           src: url(<?php echo esc_url(plugins_url('fonts/roboto.woff2', __FILE__) ) ?>); 
       } 
       @font-face{ 
           font-family: Poppins; 
           src: url(<?php echo esc_url(plugins_url('fonts/poppins.woff2', __FILE__) ) ?>);
       }
   </style>
<?php
}
?>

wp_head is the action you call when you need to insert something to the head of the HTML document. What we have done here is fairly simple. We have used CSS to define two font faces, calling the font file from the plugin directory. Now, you can either choose to define the fonts for the elements here in the CSS or you can define them in the Additional CSS section in customizer. The latter is what I recommend since it the last CSS file called by WordPress and replaces everything before it.

Download the Custom Fonts Plugin

You can either write all this, or directly download the plugin file.

DOWNLOAD PLUGIN FILE

It’s as simple as this. I know a few skeptical questions that could come to your mind. Why not upload the font somehow and call it in the customizer? Truth be told, you can. What I have tried here is to kill all birds with the same bullet. For hosting companies like wordpress.com it’s extremely hard for everyone to upload files via SFTP and what not. This is the best way to go around such tricky hosts.

Hope you will have fun with what you read. If you have any suggestions, feel free to comment. If you know a better way to implement this, I would love to hear about it.