【CSS】Googleフォントをローカル設置で使う

ある案件で、Googleフォントの「Noto Sans JP」をCDNで読み込んだら結構通信が重かったので、ローカルに置いて読み込むことにしました。

手順

1．フォントのダウンロード
2．フォントファイルをローカルに設置
3．CSS：font-face設定
4．CSS：font-familyで指定

1．フォントのダウンロード

各フォントのページにてダウンロード。

2．フォントファイルをローカルに設置

ソースファイル内の任意のフォルダに設置。
/public/font/notosansjp/〜　など。

3．CSS：font-face設定

基本の型

// フォント設定
@font-face {
 font-family: '任意のフォントファミリー名';
 font-weight: 400; // Regularに400を設定しておく
 src: url(フォントファイルのパス/フォントファイル名) format('フォントタイプ');
}

// 呼び出す
.hoge {
  font-family: '上で設定されたフォントファミリー名';
  font-weight: 任意;
}

fontタイプの種類

.ttf　・・・　format("truetype")
.otf　・・・　format('opentype')
.woff ・・・　 format("woff")

and so on..

実際のソース例。
font-weightを使い分ける場合は、全てのweightを設定しておく。
呼び出し時に指定されたfont-weightで、同じweightのフォントが当てられる。

/font ディレクトリ内に notosansjp というディレクトリを作りその中にフォントファイルを設置。
使いたいweightの分だけ設定しておく。

@font-face {
 font-family: 'notosansjp';
 font-weight: 400;
 src: url(/font/notosansjp/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
 font-family: 'notosansjp';
 font-weight: 500;
 src: url(/font/notosansjp/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
 font-family: 'notosansjp';
 font-weight: 600;
 src: url(/font/notosansjp/NotoSansJP-Bold.otf) format('opentype');
}
@font-face {
 font-family: 'notosansjp';
 font-weight: 900;
 src: url(/font/notosansjp/NotoSansJP-Black.otf) format('opentype');
}

4．CSS：font-familyで指定

例えば以下のように書けば、
名前が「notosansjp」で、font-weightが「600」に設定されている、
「NotoSansJP-Bold.otf」が適用される、という仕組み。

.hoge {
  font-family: 'notosansjp', "メイリオ", sans-serif;
  font-weight: 600;
}

参考にさせていただいたページ

【css】Webフォント、ローカルフォントの指定方法 at softelメモ

新しくなったGoogle Fontsの使い方

Noto Sans JPはこちら。

Google Fonts