BLOGメニューHomeTwitterGitHub検索:軽量化したWEBフォントでWEBサイトをおしゃれにする2017-11-10WEBサイトを作る際、フォントを変えるとグッと雰囲気がおしゃれになるのでWEBフォント導入したい。日本語のWEBフォントはとても重たく、フォントを読み込んでから適用されるまでに数秒かかることもしばしば。そんな理由から結局面倒なのでWEBフォントを使わない、使っても読み込みが遅いままだったのですが、ちゃんと調べてみると軽量化する方法があることが分かりましたので、試してみようと思います。軽量化の手順は以下の4ステップ。使いたいWEBフォントをダウンロード使用したい文字数を制限するWOFF形式に変換するWEBサイトで読み込む軽量化には、以下の2つのツールを使います。JPが一番オシャレ感あったので、こちらのThinをダウンロードします。サブセットフォントメーカーを使ってフォントファイルの文字数を制限します。使用したい文字列を「フォントに格納する文字」に入力し、作成開始ボタンを押下するだけで新しいフォントファイルが作成されます。第一水準漢字の2965文字とします。第一水準漢字には常用漢字1945文字とその他の人名用漢字が含まれてるので、ふつうのWEBサイトであれば問題ないでしょう。歴史コンテンツを扱うサイトとか普段使わないような漢字を使いそうな場合には注意が必要そうです。英数字記号!”#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~、。コンバータを使ってフォントファイルをWOFF形式に変換します。WOFF形式だとフォントデータが圧縮されているらしく、他と比べて若干軽量らしいとのこと。!これで十分WEBサイトで使えるサイズ感になったと思います。4.WEBサイトで読み込む最後はWEBで読みむだけです。軽量化のおかげて、一瞬で読み込みが終わるようになりました。200;}こんな感じになります。BEFOREAFTER<参考リンク>日本語ウェブフォントを軽くして、読み込みをはやくする。