WordPressのテーマ「stinger5」のカスタマイズその4(webフォント変更)

今まで使用していたwebフォントはttfというサイズの大きな形式でした。

またライセンス上、改変ができないためeof、woffといったコンパクトな形式に変換することも不可能。

そこで、同じゴシック体で形式を変換可能なフォントを探していました。。

見つけたのが「フォントな。」さんの「やさしさゴシック」

画像




フォントな

ttf形式からeof、woffの変換はiPadでは無理なので、PCで「武蔵システム」さんの「WOFFコンバータ」を使い、変換しました。

WOFFコンバータ

小テーマの入っているフォルダ内に、ttf、eof、woff形式のフォントをアップロード。

そして、style.cssの@font-face{}の部分を以下のように書き換えました。

上記の記述は、以下のサイトを参考にさせてもらいました。

WebフォントのCSS指定2014年度版とこれまでの歩み – WEBCRE8.jp

今回記述した@font-face構文は上記サイトによると…

•IEは独自仕様としてEOTファイルを採用
•IE9はカンマ区切りのsrcプロパティ複数指定を受け付けないのでまず単独の指定を行う(これは後から追加されたもの)
•IE4〜8以降はフォントはsrcプロパティ複数指定、タイプ指定を受け付けないので?を付け、それ以降の記述をクエリ文字列として無視させる
•ほとんどのモダンブラウザはWOFFに対応しており、今後もこれに統一されていく
•特にAndroidは4.3までWOFFに対応していないためTTFが必須

IEはEOTファイル、いまどきのブラウザ用にWOFF、その他のブラウザ用にTTFを指定している(のだと思います…汗)

仕上げに、登録した”yasashisa”フォントを最優先に指定


これで少しは表示が軽くなったと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です