Web Font

Web Fontを使用する場合、サイトがあるサーバーにフォントファイルを設置する方法がとられる。設置したフォントファイルをCSSで使用する場合、@font-faceを活用する。例えば、Google Font APIでフォントデータを読み込む場合に読み込むCSSは以下のようになっている。

https://fonts.googleapis.com/css2?family=Cinzel&display=swap

/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v11/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfYPlC2xcZqTFU3AS.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v11/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfY3lC2xcZqTFUw.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

この指定を行うことでCSSのfont-familyで読み込んだリソースのフォントファミリーを指定することができるようになる。 また先にも述べたとおりフォントデータは巨大なので、自前のサーバーにWeb Fontを設置するのではなく、CDNなどの高速配信が設定されているGoogle Font APIなどを利用するのが簡単であり普及している。

ex: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">

日本語Web Fontの場合

英語のように文字数が多くない言語と比較し、日本語文字など東アジア文化圏の言語には複数の文字が存在するため、1バイト（0～255）内に全ての文字データを格納しきれない。そのため、日本語のフォントデータには　Multibyte character set（日本語では全角/Zenkakuと通称される）が使用されている。 つまり、日本語フォントのWEB Fontではさらにデータサイズが巨大になるため、自前サーバーからフォントデータを配信する場合にはsubsetなどを行いデータサイズを縮小する処置が取られる場合もある。