Webフォントを使うための準備で使う記述が@font-faceです。

使い方

font-familyプロパティでフォント名を定義します。
また、srcプロパティでフォントファイルの場所を指定します。


@font-face {
    font-family: 'monakakomi';
    src: url('/files/font/MonacakomiMinimum.woff2') format('woff2');
}

実際にWebフォントを適応するための記述

@font-faceのfont-familyで定義したフォント名を、改めてfont-familyで使用します。
このサイトではcodeタグやpreタグに上記のmonacakomiフォントを強制適応しています。


code,pre {
    font-family:monakakomi !important;
}

応用例

@font-faceでは、適応する文字種を制限することもできます。例えば、ascii文字の範囲だけをWebフォント化したい時には以下のように記述します。


@font-face {
    font-family: 'ascii';
    src: url('/files/font/MonacakomiMinimum.woff2') format('woff2');
    unicode-range: U+0000-007f;
}

この状態で以下のようなCSSを更に追記すれば、ascii文字だけにWebフォントを適応できます。


body {
    font-family:ascii, "UD デジタル 教科書体 N-R";
}

特定の文字種だけは別のフォントを適応したい、という場合に役立つかもしれません。