HTMLメールとかの字体をWebフォントにするといった話をよく聞くのでここにまとめようと思います。ほかのサイトなどでたくさんWebフォントに関しての内容などが記載されているものもあると思うのですがここでも話題にしていこうと思います。
Webフォントの適用方法に関しては主に、2つの方法があります。
- Webフォントのファイルをダウンロードしてきて、反映させる
- サーバーにWebフォントをアップロードして反映させる方法
この2つの方法です！！
Webフォントのファイルをダウンロードして反映させる方法
この方法は、ネット上などで購入でもいいですし、無料ものでもいいですし(無料のものの場合、商用かどうかは気を付けないといけません。)、何かしらダウンロードしてきて、自身のローカル環境でファイルパスを指定します。
その後、cssファイルで以下のように指定します。
main.css
@font-face{
font-family:"フォント名";
src: url("ファイルパス名を入力") format("フォーマット名を入力");
}
フォント名には独自の設定したフォント名を記入します。ファイルパス名は、ダウンロードしたファイルのファイル名を記入します。フォーマット名に関しては対応するフォーマットの名前を記入します。
以上でローカル環境にダウンロードしたWebフォントをcss経由で反映させることができます。
サーバーにアップロードして反映する方法
この方法では、Webフォントのファイルをサーバーにアップロードしてリンクを作成します。
その後、先ほどと同様にして、
main.css
@font-face{
font-family:"フォント名";
src: url("アップロードしたサーバーのリンク名") format("フォーマット名を入力");
}
urlの箇所にアップロードしたサーバーの名前を記入します。
以上の方法でWebフォントをサーバーにアップロードして使用することができます。
format指定方法
formatは次の通りに指定するようにしましょう！
| formatタイプ | fontタイプ |
|---|---|
| format : woff | Web Open Font Formatフォントを使用するとき |
| format : truetype | TrueTypeフォントを使用するとき |
| format : opentype | OpenTypeフォントを使用するとき |
| format : embedded-opentype | Embedded-OpenTypeフォントを使用するとき |
| format : svg | SVGフォントを利用するとき |
注意
Webフォントは無料のフォントと、有料のフォントが存在します。有料のフォントは問題ないのですが、無料のフォントを商用に使用する際は商用で使用してよいか注意が必要です！
また、最近では、Google フォントが万能で使用している人が多い印象です！！