4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Webフォントを高圧縮する

Posted at

###Webフォントも高圧縮できます。
一般的にはApacheのDEFLATEやnginxのgzipで圧縮することができますが、その圧縮率はあまりよくないようです。

###7zip(p7zip)で圧縮する
通常のgzipより10%程度高圧縮になります。

圧縮一例として
https://icomoon.io/ iconmoonで生成されたフォントを圧縮すると

icomoon.eot 4580bytes→icomoon.eot.gz 2828bytes
icomoon.svg 14417bytes→icomoon.svg.gz 5306bytes
icomoon.ttf 4416bytes→icomoon.ttf.gz 2782bytes
icomoon.woff 4492bytes→icomoon.woff.gz 2799bytes

と半分程度以上の圧縮になります。

###圧縮のコマンドライン
rm -f output.gz
7za a -tgzip -mx9 -si output.gz < input

###.htaccessに記載する内容
ついでなので、CSS、JavaScriptの圧縮も含んでいます

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

<FilesMatch "\.css\.gz$">
	ForceType   text/css
	AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.js\.gz$">
	ForceType   application/x-javascript
	AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.eot\.gz$">
	ForceType   application/vnd.ms-fontobject
	AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.svg\.gz$">
	ForceType   image/svg+xml
	AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.ttf\.gz$">
	ForceType   font/truetype
	AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.woff\.gz$">
	ForceType   application/font-woff
	AddEncoding x-gzip .gz
</FilesMatch>
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?