[Resolved] CSS Minify causes 404 errors for fontello/fontawesome

[Arttu Heikkinen]

Hello there,

Recently I have switched my WordPress website to use LS Cache. LiteSpeed is super fast and currently my web page loads within 200 ms. Unfortunately there's some problems with FontAwesome and Fontello. Let me explain more.

When I have switched CSS minify and combine on (CSS loads asynchronously), I got six bad requests. GTmetrix, Pingdom Tools and Google Pagespeed Insights tells me that following URLs cannot be found (error code 404):

• (domain)/fonts/fontawesome-webfont.ttf?v=4.7.0
• (domain)/fonts/fontawesome-webfont.woff2?v=4.7.0
• (domain)/fonts/fontawesome-webfont.woff?v=4.7.0
• (domain)/fonts/fontello.ttf?72294633
• (domain)/fonts/fontello.woff2?72294633
• (domain)/fonts/fontello.woff?72294633

I'm not quite sure which causes this but I think that minifying process somehow breaks the correct URL addresses. Files are located on server: public_html/wp-content/themes/[theme]/css/fonts/ , /css/fontello/ and /css/fontawesome

Here's part of htaccess -file where we see that woff -types are included with ExpiresByType:

<FilesMatch "\.(pdf|ico|svg|xml|jpg|jpeg|png|gif|webp|ogg|mp4|webm|js|css|woff|woff2|ttf|eot)(\.gz)?$">
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType application/pdf A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType image/vnd.microsoft.icon A2592000
ExpiresByType image/svg+xml A2592000

ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/webp A2592000

ExpiresByType video/ogg A2592000
ExpiresByType audio/ogg A2592000
ExpiresByType video/mp4 A2592000
ExpiresByType video/webm A2592000

ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000

ExpiresByType application/x-font-ttf A2592000
ExpiresByType application/font-woff A2592000
ExpiresByType application/font-woff2 A2592000
ExpiresByType application/vnd.ms-fontobject A2592000
</IfModule>
</FilesMatch>

When CSS minify process is disabled, this problem won't appear. Have anybody same kind of errors before? I use Fontello icons on my website. These icons are loaded properly. None of fontello icons are missing.

 

[hai]

You should exclude fontawesome css from optimization. Once its optimized, the path of that css will be changed to /min/xxx.css, which will cause the relative font path in css 404.

 

[Arttu Heikkinen]

Thank you for help.
The problem was actually caused by incorrect critical css path. URLs were included with url(../fonts/ for example so I decided to enter full addresses. Now there's no any bad requests and everything works fine.