1

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: *
2

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.

  • Well, chose a wrong font I guess, there are also custom generated font, question modified – Edward May 18 '18 at 8:46
  • Have you checked other files that are not by default compressed by GZIP such as SVG? – Simon Hayter May 18 '18 at 8:48
  • Yes, svg files are compressed by GZIP – Edward May 18 '18 at 8:49
  • Just tried CDN JS, their Ionicons(2.0.0) isn't compressed, it spent around 1000ms to download the icon package, even slower than my host. Tested from Virginia USA, the response header shows cache hit – Edward May 18 '18 at 9:57
  • CDN JS is powered by Cloudflare, if you experienced slowdown then its a routing issue most likely with what your using to test it. To determine a good host, test it from multiple locations, not just the one. Use Web Page Speed Test, your see the majority of the results will be faster than your actual hosting. – Simon Hayter May 18 '18 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.