Gzip-compression of EOT, TTF, WOFF and WOFF2 fonts and other

To date, the Internet uses four formats of font containers: EOT, TTF, WOFF and WOFF2 . But, unfortunately, as usual, despite the 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 common than others, but it can not be used in some older browsers.
• Over the support of WOFF 2.0 are working now.

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

In this regard, we need to use all these formats to make the page look the same for users of different browsers.

Let's continue about compression. Since I have Nginx as the frontend on the server, and Apache's backend, it was enough to enable Gzip only in Nginx. It turns on very simply. You need to add a line in the configuration file:

  Gzip on; 

Now we list the file pharma that 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 located here: /etc/nginx/nginx.conf

For the changes to take effect, restart Nginx: nginx -s reload

More detailed settings of Gzip-compression in Nginx can be found on the official site of Nginx.

In the same file, be sure to check the values ​​of the gzip_types parameter . First of all, it often happens there is not specified application / font-woff2 , and therefore this font file was not processed by Gzip-compression. At the same time, check the availability 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 whether these types are listed in this file. Below, I will simply list 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;
 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 .