403 Forbidden error with ttf and woff files in WordPress

I recently installed a new WordPress theme for my blog and certain icon images were not displaying. In the developer console in Chrome, I found the cause, there was a 403 Forbidden error for a .ttf and .woff file. I assumed it was a file permissions issue. I experimented with increasing the file permissions on multiple folders using FileZilla with no success. I checked the .htaccess file in my blog’s main folder and it was configured correctly. The forum posts dealing with similar issues pointed to either the .htaccess file or file permissions. Every suggested solution didn’t work. I spent at least three hours looking into solving the problem with no success and my frustration was increasing. I happen to find the solution in a post about W3 Total Cache, a WordPress plugin. The .ttf and .woff file extensions needed to be added to the .htaccess file in the wp-content folder.

Here is the section where the file extensions need to be added in the .htaccess file:

# Disable access to all file types except the following Order deny,allow Deny from all
<Files ~ ".(xml|css|js|jpe?g|png|gif|pdf|docx|rtf|odf|zip|rar|eot|svg|ttf|woff|svg|ico|gzip|html)$"> Allow from all </Files>

This solution should save time from having to go through endless forum posts.

Matthew Dailey

Web developer, photographer, and Photoshop user.