[CSS] @font-face規則で独自フォントの利用を指定しよう!

1.@font-faceとは?

@font-face規則は独自フォントの利用を指定する@規則です。

url()関数、local関数によってフォントのURLや名前を指定するとテキストの表示Webサーバー上のフォントやユーザーのローカルPCにインストールされたフォントを適用できます。

値の指定方法は以下の通りです。

{ @font-face: font-family: ファミリー名; src: フォントのURL/名前 フォントの形式; 記述子; }

記述子

2.@font-faceの使い方

それでは@font-faceの使い方をみていきましょう。

@font-face {
 font-family: MyHelvetica;
 src: local("Helvetica Neue Bold"),
      local("HelveticaNeue-Bold"),
      url(MgOpenModernaBold.ttf);
 font-weight: bold;
}

上記の例では、ユーザーのローカルにある “Helvetica Neue Bold” が使用されます。

もしユーザーがそのフォントをインストールしていない場合は、 “MgOpenModernaBold.ttf” という名前のダウンロードフォントが使用されます。