ウェブフォントが無くても表示させたい時の対応

先日「Segoe Script」という手書き風のウェブフォントを設定しました。

しかし、このフォントはWindowsのみ対応でした。自分はWindowsで制作したので、問題無く表示されましたが、後でMac、iPhone、Androidだと表示さないことが分かりました。

下の画像は、Windowsでの表示です。英文の部分が「Segoe Script」

下の画像は、Mac、iPhone、iPad、Androidでの表示です

フォントが反映されないと、デザインが変わってしまいますね。クライアントからも、なんとか表示してほしいと言われました。まあ、そうですよね。全然、雰囲気が変わりますからね。

2、3か所だったら、画像にして対応しますが、何十か所もありました。今から画像にするのは、面倒なので避けたかったです。

ということで調査したところ、意外に簡単にできましたので、皆さんへ情報を共有します。

woff形式のファイルを用意すればOK

フォントのファイル形式で、woffという形式があります。

ウェブブラウザで閲覧する時に、ウェブフォントに対応していない場合は、woff形式のファイルでフォントを読み取ることができます。

つまり、woff形式のファイルを用意しておけば、ウェブフォント未対応のフォントも表示することができます。

woff形式でファイルを書き出し

まずは自分のPCに格納されている対象のフォントを用意します。
Windowsだったら、C:\Windows\Fontsに格納されています。

今回は「Segoe Script」なので、このファイルを複製して用意しました。

自分のPCに格納されているファイルは、恐らく拡張子が.ttfだと思います。このファイルを.woffに変換します。

こちらのサイトを使って拡張子「.woff」へ変換しました。https://convertio.co/ja/ttf-woff/

ドラッグドロップで簡単にwoffファイルが作成できます。

CSSでwoff形式のファイルを読み込みます

woff形式に変換したファイルを、ディレクトリ内の適当な場所に置きます。
そして、cssで読み込みます。

@font-face {
font-family: "Segoe Script woff";
src: url("../font/segoesc.woff") format("woff");
}

font-familiyの名前は、好きな名前でOKです。あとは使いたい場所でfont-familyを指定すれば、表示されます。

.sample {
font-family: "Segoe Script woff";
}

Windows,Mac,iPhone,Androidとすべての端末で、Segoe Scriptフォントが表示されました。

まとめ

ウェブフォントに対応していないフォントは、woff形式に変換してCSSで読み込むように設定する。これで問題無く表示できました。今回やってみた所、意外に簡単でした。

とはいえ、今回は欧文フォントだったので、問題が無かったのだと思います。

日本語フォントであれば、表示が遅い可能性があります。その点はご注意ください。なんでもwoff形式にしたら大丈夫かといえば、そんなことは無いと思います。欧文フォントをピンポイントで使うのがおススメです。

facebook
twitter
line
hatena
pocket
TOP