Webフォントというと、読み込みの重いファイルという印象で、個人的には使うことには躊躇するところがありましたが、昨今は通信環境が整ってきていることもあり、以前よりずっと利用しやすくなっています。

特に欧文フォントの場合は読込サイズも小さいですし、無料で気軽に使える Google Fonts が普及したことも理由の一つでしょう。

自分のウェブサイトでWebフォントを使う場合について、

• ホスティングサービスのフォント
• 自分でアップロードして利用するフォント（CORS対応*後述）

二通りについて、使い方をまとめました。

ホスティングサービスのフォント

Google Fonts、Adobe Fonts は、フォントのホスティングサービス（ウェブサーバー上にアップロード済みで、それを貸してもらうサービス）の代表格。
ちょっとした設定とコードのコピペで動作しますし、おまけに無料。

Google Fonts

Google Fontsは、すべて無料。和文フォントは31種類あります（昔より増えてます）。
設置はかんたんで、「+ Select this style」をクリックして、

右に表示される link rel～をHTMLのhead内に、font-family～を該当するCSSセレクタ（bodyなど）にコピペするだけです。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet"> 

font-family: 'Roboto', sans-serif;

Adobe Fonts

Adobe Fontsは、Adobe IDを登録すると一部フォントを無償で利用できます。
Google IDやFacebook IDでもログインできますので、そちらをすでに持っている方は登録不要です。

Creative Cloudの契約（サブスクリプション）により、制限なく使えるようになります。
無償版は「CCでのフォント」や「CC で利用可能」以外のフォントが使えます。

Adobe Fontsは、Adobeサイト内でアクティベートしてから使用するため、手順がすこし複雑です。
マニュアルを見ながら作業してください。Web サイトへのフォントの追加 - Adobe 公式

設置コードはGoogle Fontsと同様に、link rel～をHTMLのhead内に、font-family～を該当するCSSセレクタ（bodyなど）にコピペするだけです。
和文フォントは、script～とすこし長いコードをコピペすることになります。

欧文フォントのコード例

<link rel="stylesheet" href="https://use.typekit.net/???????.css"> 

font-family: fot-matisse-pron, sans-serif;
font-weight: 500;
font-style: normal; 

和文フォントのコード例

<script>
  (function(d) {
    var config = {
      kitId: '???????',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

font-family: setofont-sp, sans-serif;
font-weight: 400;
font-style: normal;

フォントをアップロードして使用する場合

たとえば、他サイトを眺めていて、雰囲気のよい欧文フォントを使っていたとします。
font-familyを見ると知らないフォント名だったので検索してみると、フォントを無料配布しているサイトにたどり着きました。

ライセンスを見ると商用可になっているので、うちのサイトでも使って見ようかと思ったものの、そういうところでは、Google Fontsみたいにホスティングされていません。

その場合は、自前のウェブサーバーにアップロードして使います。
フォントファイルには複数のフォーマット（otf、woff、eot、ttfなど）があります。各フォーマットでブラウザの対応が異なりますので、複数アップロードしておくことがあります。

以下のように、CSSにfont-faceを指定します。
OkiniFont は任意のフォント名。urlはアップロード先を指定。

@font-face {
  font-family: 'OkiniFont';
  src: url('https://naeco.jp/fonts/MPLUS1p-Regular.ttf') format('ttf'),
       url('https://naeco.jp/fonts/MPLUS1p-Regular.woff') format('woff');
}

font-family: OkiniFont, sans-serif; 

アクセス許可されていないと、エラーが出る場合

異なるドメイン間でリソースをやり取りするときに、オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS)の問題が発生します。オリジン間リソース共有 (CORS) - HTTP | MDN

他ドメインからファイルを使おうとするときには、ウェブサーバー側（フォント置き場）で許可が必要になります。

ウェブサーバーがApacheの場合は、.htaccessファイル内に下記の記述を追加します。
https～は、フォントを使いたいサイトのドメインを指定します。

naeco.jpに置いたフォントを、naeco.shop-pro.jpで使うように指定しました。

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "https://naeco.shop-pro.jp"
</IfModule>

丸めの和文フォントを導入した表示例です。

おわりに

Webフォントを使う場合には、メリット・デメリットがありますが、昨今は便利に使えるようになってきたなぁ、という印象です。

実際にウェブサイトで使う場合は、読み込み時間を短縮する方向で導入を検討されると思います。
・使用箇所が少ない場合は、画像で対応する。
・Webフォントをサブセット化（必要な文字だけ切り出す）して、ファイルを軽量化する。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら