Why gzip compression not working on font file?

Question

Resources on my site are compressed before sending to client browser, except fonts, I've checked everything but couldn't find anything wrong.

Here is my CSS, one of the fonts:

@font-face {
    font-family: 'my-custom-font';
    src: url(//site-domain/font/my-custom-font.eot?19806217);
    src: url(//site-domain/font/my-custom-font.eot?19806217#iefix) format('embedded-opentype'),
    url(//site-domain/font/my-custom-font.woff2?19806217) format('woff2'),
    url(//site-domain/font/my-custom-font.woff?19806217) format('woff'),
    url(//site-domain/font/my-custom-font.ttf?19806217) format('truetype'),
    url(//site-domain/font/my-custom-font.svg?19806217#my-custom-font) format('svg');
    font-weight: normal;
    font-style: normal;
}

Here is the deflate settings in httpd.conf:

<IfModule mod_deflate.c>

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/collection" \
                                      "font/eot" \
                                      "font/opentype" \
                                      "font/otf" \
                                      "font/ttf" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "image/vnd.microsoft.icon" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/calendar" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/markdown" \
                                      "text/vcard" \
                                      "text/vnd.rim.location.xloc" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"

    </IfModule>

    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

</IfModule>

I have checked that:

• the font file exists in my host
• httpd.conf has no duplicate rules
• .htaccess has no conflict rules
• mod_filter and mod_deflate are enabled
• request header has Accept-Encoding: gzip, deflate

Any advice?

---

Also the response header in browser, if it helps

HTTP/1.1 200 OK
Content-Type: x-font/ttf
Content-Length: 188508
Connection: keep-alive
Date: Fri, 18 May 2018 07:26:41 GMT
Server: Apache/2.4.33 OpenSSL/1.0.2k-fips PHP/7.0.29
Last-Modified: Wed, 05 Oct 2016 00:50:06 GMT
Accept-Ranges: bytes
Cache-Control: max-age=2592000, public
Expires: Sun, 17 Jun 2018 07:26:41 GMT
Access-Control-Allow-Origin: *

Answer 1

Personally, I would not even bother storing Ionicons locally because it is a common library that is hosted on public Content Delivery Networks (CDN).

Serving Ionicons from CDN JS in this case //cdnjs.cloudflare.com/ajax/libs/ionicons/4.0.0-19/css/ionicons.min.css will be faster than hosting it locally, not only will it be served by a CloudFlare server nearer to the visitor, it will most likely be cached on the visitors machine pre-visit. Ideally you should aim to host externally whenever possible since its one less request on your server and most often faster for the end-user.

Additional information

CDN's use good LONG expires meaning the likelihood of them already having that on their computer is very high. If someone visits exampleA.com and then exampleB.com uses the same fonts then that user will not need to re-download the fonts.

Most browsers will prioritize WOFF2 and WOFF, these formats are already compressed.

• Firefox versions newer than 8 years fully support WOFF fonts
• Chrome versions newer than 8 years fully support WOFF fonts
• Opera versions newer than 7 years fully support WOFF fonts
• Safari versions newer than 7 years fully support WOFF fonts
• Internet Explorer versions newer than 7 years fully support WOFF fonts
• Safari / Chrome iOS versions newer than 6 years fully support WOFF fonts
• Android Browsers newer than 5 years fully support WOFF fonts
• Blackberry Browsers newer than 5 years fully support WOFF fonts

In fact only around 3% of browsers that are used do not support WOFF, these users are more likely to run into problems with CSS/HTML rather than fonts.

The 97% of your users will see more benefit from you using the CDN and storing it locally would slow it down for those users.