フォントファイルによる体裁

フォントファイルによる体裁

2020-06-11


サイトのフォントを指定する

head要素で指定する。方法としては、head要素でCDNのネット配信版を使用するか、ダウンロードして組み込んで使用する。

Webフォント

Webフォントを使うか、組み込みフォントを使う。Googleのwebフォントは使用許諾の上、無料で使用できる。

ネット配信できるCDN方式

ダウンロードして全フォントを組み込むか、ジェネレート時に使用するフォントだけ組み込んでGulpでサイズを小さくする方法とどちらかを選ぶことができる。
Gulpで公開時に使いたいフォントだけサブセット化して組み込むことができる。

gulp + fonttoolsでフォントのサブセットを作成する

Googleフォントのサイトで好きなフォントを選び、 embeddedボタンを押してコピーし、head要素に貼り付ける

  1. 〜の中に、 以下をコピペする
1
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Sawarabi+Mincho&display=swap" rel="stylesheet">
1
font-family: 'Noto Sans JP', sans-serif;

フリーフォント

フリーフォント、ライセンスを確認する

たぬき油性マジック;ttf

なごみ極細ゴシック;otf

フリーフォントで字詰め情報を持たせる

Noto Serif CJK(源ノ明朝)の font-feature-settings:palt 対応サブセットフォントを作る