This page has been robot translated, sorry for typos if any. Original content here.

Gzip compression of EOT, TTF, WOFF and WOFF2 fonts and others

Gzip-сжатие шрифтов EOT, TTF, WOFF и WOFF2 и других

A computer font is a file containing a description of a set of alphabetic, numeric, service and pseudographic characters used to display these characters (in particular, text) by the program or the operating system.

When developing Internet projects, plug-in fonts are used. However, after testing the download speed of one of the sites, PageSpeed ​​Insights reported that Gzip compression was not applied to the file with * .WOFF2 fonts, although it was turned on and configured for a long time.

How to compress plug-in fonts using Gzip, we will describe later in our article.

To date, four font container formats are used on the Internet: EOT, TTF, WOFF and WOFF2 . But unfortunately, as is usually the case, despite the possibility of choice, there is no single format that would work in all browsers:

  • EOT is available only in Internet Explorer.
  • TTF is only partially supported in this browser.
  • WOFF is more widely distributed, but it cannot be used in some older browsers.
  • Over support WOFF 2.0 are currently working.

There is another font container format - SVG . But it was never supported in Internet Explorer and Firefox. And now it is no longer used in the Chrome browser.

In this regard, we need to use all these formats so that the page looks the same among users of different browsers.

Continue on compression. Since I have Nginx running as a front-end on the server and Apache backend, it was enough for me to turn on Gzip only in Nginx. It is included very simply. It is necessary to add a line in the configuration file:

  gzip on; 

Now we will list the pharmacy files we need to compress through Gzip:

 gzip_types
 application / atom + xml
 application / javascript
 text / javascript
 application / json
 application / ld + json
 application / manifest + json
 application / rss + xml
 application / vnd.geo + json
 font / ttf
 application / x-font-ttf
 application / vnd.ms-fontobject
 application / font-woff
 application / font-woff2
 application / x-web-app-manifest + json
 application / xhtml + xml
 application / xml
 font / opentype
 image / bmp
 image / svg + xml
 image / x-icon
 text / cache-manifest
 text / css
 text / plain
 text / vcard
 text / vnd.rim.location.xloc
 text / vnd.wap.wml
 text / vtt
 text / x-component
 text / x-cross-domain-policy; 

In Ubuntu Server, this file is here: /etc/nginx/nginx.conf

Restart Nginx for the changes to take effect: nginx -s reload

For more detailed settings of Gzip-compression in Nginx can be found on the official website of Nginx.

In the same file, be sure to check the values ​​of the gzip_types parameter. First of all, it is there that application / font-woff2 is most often not specified, and therefore this font file was not processed by Gzip compression. At the same time, check for the presence of other font formats:

 application / x-font-ttf
 application / vnd.ms-fontobject
 application / font-woff
 application / font-woff2

That's not all. Now open /etc/nginx/mime.types and check if these types are listed in this file. Below I just give the contents of this entire file:

 types {
 #
 # Data interchange
 #
 application / atom + xml atom;
 application / json json map topojson;
 application / ld + json jsonld;
 application / rss + xml rss;
 application / vnd.geo + json geojson;
 application / xml rdf xml;
 #
 # JavaScript
 #
 application / javascript js;
 #
 # Manifest files
 #
 application / manifest + json webmanifest;
 application / x-web-app-manifest + json webapp;
 text / cache-manifest appcache;
 #
 # Media files
 #
 audio / midi mid midi kar;
 audio / mp4 aac f4a f4b m4a;
 audio / mpeg mp3;
 audio / ogg oga ogg opus;
 audio / x-realaudio ra;
 audio / x-wav wav;
 image / bmp bmp;
 image / gif gif;
 image / jpeg jpeg jpg;
 image / png png;
 image / svg + xml svg svgz;
 image / tiff tif tiff;
 image / vnd.wap.wbmp wbmp;
 image / webp webp;
 image / x-jng jng;
 video / 3gpp 3gp 3gpp;
 video / mp4 f4p f4v m4v mp4;
 video / mpeg mpeg mpg;
 video / ogg ogv;
 video / quicktime mov;
 video / webm webm;
 video / x-flv flv;
 video / x-mng mng;
 video / x-ms-asf asf asx;
 video / x-ms-wmv wmv;
 video / x-msvideo avi;
 image / x-icon cur ico;
 #
 # Microsoft Office
 #
 application / msword doc;
 application / vnd.ms-excel xls;
 application / vnd.ms-powerpoint ppt;
 application / vnd.openxmlformats-officedocument.wordprocessingml.document docx;
 application / vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx;
 application / vnd.openxmlformats-officedocument.presentationml.presentation pptx;
 #
 # Web fonts
 #
 application / font-woff woff;
 application / font-woff2 woff2;
 application / vnd.ms-fontobject eot;
 application / x-font-ttf ttc ttf;
 font / ttf ttf;
 font / opentype otf;
 #
 # Other
 #
 application / java-archive ear jar war;
 application / mac-binhex40 hqx;
 application / octet-stream bin deb dll dmg exe img iso msi msm msp safariextz;
 application / pdf pdf;
 application / postscript ai eps ps;
 application / rtf rtf;
 application / vnd.google-earth.kml + xml kml;
 application / vnd.google-earth.kmz kmz;
 application / vnd.wap.wmlc wmlc;
 application / x-7z-compressed 7z;
 application / x-bb-appworld bbaw;
 application / x-bittorrent torrent;
 application / x-chrome-extension crx;
 application / x-cocoa cco;
 application / x-java-archive-diff jardiff;
 application / x-java-jnlp-file jnlp;
 application / x-makeself run;
 application / x-opera-extension oex;
 application / x-perl pl pm;
 application / x-pilot pdb prc;
 application / x-rar-compressed rar;
 application / x-redhat-package-manager rpm;
 application / x-sea sea;
 application / x-shockwave-flash swf;
 application / x-stuffit sit;
 application / x-tcl tcl tk;
 application / x-x509-ca-cert crt der pem;
 application / x-xpinstall xpi;
 application / xhtml + xml xhtml;
 application / xslt + xml xsl;
 application / zip zip;
 text / css css;
 text / html htm html shtml;
 text / mathml mml;
 text / plain txt;
 text / vcard vcard vcf;
 text / vnd.rim.location.xloc xloc;
 text / vnd.sun.j2me.app-descriptor jad;
 text / vnd.wap.wml wml;
 text / vtt vtt;
 text / x-component htc;
 }

After that, restart Nginx: nginx -s reload .

Via matovsky.com & wiki