Gzip-стиснення шрифтів EOT, TTF, WOFF і WOFF2 і інших

На сьогоднішній день в інтернеті використовуються чотири формату контейнерів шрифтів: EOT, TTF, WOFF і WOFF2. Але на превеликий жаль, як завжди це буває, не дивлячись на можливість вибору, не існує єдиного формату, який працював би у всіх браузерах:

• EOT доступний тільки в Internet Explorer.
• TTF підтримується в цьому браузері тільки частково.
• WOFF поширений ширше інших, однак його не можна використовувати в деяких старих браузерах.
• Над підтримкою WOFF 2.0 працюють в даний час.

Існує ще один формат контейнера шрифтів - SVG. Але він ніколи не підтримувався в Internet Explorer і Firefox. І зараз перестає використовуватися в браузері Chrome.

У зв'язку з цим, нам необхідно використовувати всі ці формати, щоб сторінка виглядала однаково у користувачів різних браузерів.

Продовжимо про стиснення. Так як у мене в якості фронтендів на сервері працює Nginx, а бекенда Apache, то мені досить було включити Gzip тільки в Nginx. Включається він дуже просто. Потрібно в файлі конфігурації додати рядок:

  gzip on; 

Тепер перерахуємо Фармат файлів які нам потрібно буде стискати через 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; 

В Ubuntu Server цей файл лежить тут: /etc/nginx/nginx.conf

Щоб зміни вступили в силу, перезавантажте Nginx: nginx -s reload

Про більш докладних налаштуваннях Gzip-стиснення в Nginx можете ознайомитися на офіційному сайті Nginx.

У цьому ж файлі обов'язково перевірте значення параметра gzip_types. Перш за все саме там найчастіше буває не вказано application / font-woff2, а тому цей файл шрифтів і не оброблявся Gzip-стисненням. Заодно перевірте і наявність інших форматів шрифтів:

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

Це ще не все. Тепер відкрийте /etc/nginx/mime.types і перевірте перераховані ці типи в цьому файлі. Нижче я просто наведу зміст усього цього файлу:

 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;
 }

Після цього перезапустіть Nginx: nginx -s reload.