Webフォントについて
こんにちは！今回は「Webフォントについて」です。フォントをどの端末でも表示できる優れものです。
①Webフォントとは？
Webフォントはインターネット上で管理されているフォントのことです。
『Webサイトのフォント設定について』の記事にて。フォントを指定してもユーザーの端末にフォントが入ってない場合、表示できないと説明しました。ですがWebフォントはユーザーの端末に関係なく設定したフォントを表示できます。
②Webサービスを利用する
Webフォントを提供しているサービスがあります。各サービスの使い方にそって設定すればすぐに表示できます。
簡単で手軽に使用できますが、2つ注意点があります。
❶サイトの読み込みが遅くなってしまう
和文フォントは文字数が多いです。たくさん使用するとサイトが重くなります。今の時代はインターネットの向上で改善されていますが、Webフォントを利用する場合1〜2つ程度で利用することをオススメします。
❷費用がかかる場合もある
Webサービスによりますが、有料のフォントと無料のフォントがあります。
有料フォントを使用する場合、月額かかる場合があります。サイトは長期間インターネットにアップするものなので毎月お金を払わないといけません。利用するかを考える必要があります。
無料のフォントを使用するときも、利用規約やライセンスが必要な場合もあるので利用する場合はサイトの説明を読んで確認しましょう。
上記の注意を守って使用しましょう。
③Webサービスの種類
Webフォントを提供してくれるサービスを少し紹介します。
Google Fonts
Googleが提供しているWebフォントのサービスです。和文フォントは少ないですが、すべて無料で誰でも扱いやすく簡単にフォントの指定ができます。
Adobe Fonts
デザイナーなら必ず持っているAdobeが提供しているWebフォントです。Adobe Creative Cloudサブスクリプションプランを購入している方は利用可能です。
TypeSquare
日本のフォントを代表するモリサワフォントが利用できるWebサービスです。Webフォントが数多く提供されています。TypeSquareサービスは有料ですが、無料プランもあるみたいです。
他にもさまざまなWebサービスがあるので、ぜひ調べてみてください。
④使用したいフォントを自分でインターネットにアップする
フォントを自分でアップロードし、それをWebフォントとして使用できるようにfont-familyで設定もできます。
❶使用したいフォントをダウンロードする
表示させたいフォントを探します。探す時も利用規約やライセンスが必要なので利用する場合は説明を読んで確認しましょう。
❷フォントファイルをサブセット化する
サブセット化とは、フォントの中に含まれている文字の中から必要なものだけを抜き出してファイルサイズを軽くすることです。使用しない文字はファイルから除外しましょう。
サブセット化できるソフトがあります。まずはインストールしましょう。
・https://opentype.jp/subsetfontmk.htm
ソフトを開くと下記のような画像が出でくると思います。
⑴作成前フォントファイルを選択する
⑵作成後のファイルに保存場所を選択する
⑶フォントに格納する文字を使用する分だけ格納する
全部設定することができたら作成します。これで完成です。
❹ファイルをWebフォント用に変更する
サブセット化ができたら、Webフォント用に拡張子（.woff）を変更しましょう。
こちらもソフトがあるのでまずはインストールしましょう。
・https://opentype.jp/woffconv.htm
ソフトを開くと下記のような画像が出でくると思います。
⑴変更前のファイルを選択する
⑵変更後のファイルに保存場所を選択する
⑶woffファイルと同時にeotファイルも制作する。（選択する）
上記の設定ができたら作成します。これでフォントの準備ができました。
❺作成したフォントをCSSに設定する。
フォントファイルが準備できたら、あとはCSSに設定すれば表示できます。
@font-faceを使用します。準備したフォントデータをHTML内に読み込んで、フォント名を定義することでWebフォントとして扱えます。
CSSに下記のようにコード書きます。
@font-face {
font-family: "任意のフォント名";
src: url("読み込むフォントのパス") format(".woff"),
url("読み込むフォントのパス") format(".eot");
}これで、フォントを読み込むことができました。最後にフォントを変えたい場所にフォント名を指定すれば表示できます。
body {
font-family: "任意のフォント名";
}⑤まとめ
今回Webフォントについて記事にしましたが、まとめて見ると…
・設定したフォントでWebサイトを表示させたいときは「Webフォント」を使用すること。
・Webフォントはインターネット上で管理されているため、どの端末で見ても設定したフォントが表示される。
・Webフォントを提供しているサービスがある。
・WebサービスのWebフォントを使用するときは1〜2つまでにすること。
・Webサービスによるが、Webフォントは有料のモノや、無料でも利用規約やライセンスが必要な場合もあるので使用するときは注意すること。
・Webフォントはまだ日本語のフォントが少ないので、何種類あるかを確認する必要がある。
・Webフォントのサービスはたくさん存在する。（上記参考）
・Webフォントは使用したいフォントを自分でインターネットにアップすることもできる。
・使用したいフォントにも利用規約やライセンスがあるので、ダウンロードするときに確認すること。
・和文フォントは容量が多いため、よく使用する文字だけを厳選してファイルを小さく（サブセット化）する必要がある。（上記参考）
・サブセット化ができたら、フォントの形式をWebフォント用に変更する。（上記参考）
・woffはWebフォント用の拡張子であり、さまざまなブラウザに対応している。（IEは未対応）
・eotはIEのみ対応している拡張子である。
・フォントファイルの準備ができたら、cssに@font-faceを設定し、表示させたい場所にfont-familyを設定すれば、Webフォントとして使用することができる。
このような感じだと思います。
この記事を見ていただき、ありがとうございました！
参考にしたサイト