@font-faceを使ったWebフォントの使い方

css3

2020.04.042019.12.03

webフォントには大きく分けて２種類の使い方があります。
1つはGoogleFontのようにネット上にあるCDNを使うパターンです。
今回は、もう1つの、「自身でフォントデータをサーバーにアップする」方法をやってみましょう。こちらの方法を使えば、GoogleFontには無いような珍しい個性的なフォントを表示させる事も可能になります。

1、使いたいフォントデータを自身のサーバーにアップロードする。

2、CSSに「@font-face」でフォントの指定をする。

@font-face {
   font-family: MyFont; /*任意の名前を付ける*/
   src: url('fonts/againts.otf') format("opentype");
}

3、適用させたい要素に上で付けたfont-familyを指定する

h1 {
  font-family: MyFont;
  font-size: 40px;
}

このように非常に簡単な記述でWebフォントは使え、最近は無料のフォントデータも豊富にあるのでぜひ使ってみましょう。
ただ、むやみに多種類のフォントを使う事はファイルの読み込みが遅くなり、デザイン的にも良くないので注意が必要です。また、個人・商用共にフリーのフォントでも再配布禁止のフォントはたくさんあるので、ライセンス確認は必ず行いましょう。

ダウンロードしたフォントの中にTrueTypeとOpenTypeの両方があった場合、Webサイト制作ではOpenTypeデータを優先的に使いましょう。

TrueType

TrueTypeは歴史が長く、様々なアプリケーションに使われている形式。特にWindows用のアプリケーションでは、いまだにTrueTypeのみをサポートしているというものが残っている。たとえば、年賀状ソフトや、WordやPowerPointの一部の機能はOpenTypeに対応していないものがある。