How to load fonts on localhost ?!

I was recently working on a theme and wanted to integrate Font Awesome as part of the theme instead of pulling font-awesome.min.css from a CDN as BootstrapCDN or JSDELIVR or cdnjs and so on…

Download

The easy part is to download Font Awesome.
You can go and grab a copy of the latest release on the GitHub project repository or simply head up to the Get Started page of the official website where you’ll find a download link/button under the Download & Customiof this page. this page.

Now, unzip the downloaded folder.
You’ll notice that you now have inside it 4 main folders :
cssfonts – less and scss.
We’ll be using the two first folders only, css and fonts.

Enqueue

Enqueuing a stylesheet or a script in WP is easy and pretty straightforward.
You can have a look at wp_enqueue_style and wp_enqueue_script on WP Code Reference. So let’s do it !
First, we’ll need to add the two Font Awesome folders in our theme.
Just create a new folder at the root your theme (at the same level as style.css), name it fontawesome or fa (I’ll be using fa), and put inside it (copy/paste) the two Font Awesome folders css and fonts.
Now, open your functions.php file (at the same level as style.css) and enqueue the minified stylesheet file font-awesome.min.css like so :

Debbuging

Now comes the tricky part !
REMEMBER THAT WE ARE WORKING ON A LOCAL SERVER !
(I’m working with Wamp)
If I’m writing a post about it, it’s because, sometimes, we fix something and say that we will remember how to fix it the next time. But the next time may not be tomorrow, it may be in the next few years !
So, if you now add a simple icon anywhere in your theme, let’s say the search icon <i class="fa fa-search"></i>, you’ll get a beautiful empty doted square !

What ?! But when we look at the source code of our front page (Ctrl+U OR right-click and View page source) , we can see that the stylesheet font-awesome.min.css is correctly loaded inside the <head> tag ! We can even click on the link and the stylesheet will be displayed !
What’s going on or maybe off 😉 ?!
Take a closer look !
Back to the theme front page, press F12 and choose the Console tab, aha !
We can read something like :
– Access to Font at … from origin ‘http://127.0.0.1’ has been blocked… OR
– Cross-Origin Request Blocked… downloadable font: download failed…

The solution is pretty easy !
First of all, click on the green Wamp icon in your system toolbar and head up to the Apache folder, than go to the Apache modules folder and make sure that the headers_module is enabled (a tick next to it). If it’s not, just click on it and your local server will restart with this module enabled.
Next, go to the root of your WordPress installation (where you can find wp-admin, wp-content and wp-includes folders) and open with your text editor of choice (like Notepad++) the .htaccess file.
Right under # BEGIN WordPress add the following code

This code will check for any loaded file with the extension .ttf or . otf … and then check if the headers_module is activated. If everything is checked and OK, it will grant the permission to access the file(s) with the given extension(s) from the Origin (our local server in this case http://127.0.0.1) “*” and from any directory under it !
Now, make a full refresh of your front page (Ctrl+F5), abracadabra !
You can now see the icons that you’ve implemented in your theme !

Conclusion

Sometimes, we spend hours to resolve an issue especially when everything works fine on our live server but crashes on our local one. When we finally get it to work, we say that we will never forget this one ! Never say never 😉
I really hope that this post will help some WP users to get bundled fonts in their theme working on their local server.

SYA 😉
LebCit

2 thoughts on “How to load fonts on localhost ?!”

    1. Hello @motoapk,
      Your are most welcome !
      I’m really glad that this post helped.

      SYA 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *