業務でNoto Sans JPを使用した際の備忘録です。
CDNでもフォントを読み込みできますが多少フォントの適用に遅延がありカクッとなってしまうため、サーバーに置きました。
見出し
- Noto Sans JPフォントを公式サイトからダウンロード
- サブセット化
- woff形式のフォントファイルに変換
- CSSでフォント指定
Noto Sans JPフォントを公式サイトからダウンロード
Noto Sans Japanese - Google Fonts
Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans serif”) design for the Japanese language
fonts.google.com
サブセットフォントメーカーをダウンロードしてサブセット化
フォントから指定された文字列だけを取り出して、ファイルサイズを小さくしたフォントを作成します。
サブセットフォントメーカー
opentype.jp
- 作成元フォントファイル：参照からダウンロードしたファイルを指定 ※使用するfont-weight(regular,boldなど)のフォントファイルすべて行う
- ここでは「NotoSansJP-Regular」「NotoSansJP-Bold」を指定
- 作成後フォントファイル：ファイルを出力する場所を指定
- フォントに格納する文字：フォントファイルに残したい文字を指定
フォントファイルに指定する文字は、JIS第1～第2水準・ローマ字・カタカナ・ひらがな・その他記号を指定するのが一般的なようです
ここで指定したフォントだけが使えるので、これ以外にも必要な文字があれば追加する
ひらがな・カタカナ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょ
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨャュョラリルレロワヲンガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポヵヶァィゥェォッヴ半角全角英数字
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ０１２３４５６７８９
半角全角 記号
!@~`#$%^&*()_-+=\|}{]['";:/?.,<> ！＠〜｀＃＄％＾＊（）＿ー＝＋｜￥｝｛'"：；・？＞。、＜「」『』¡¢£¤¥¦§¨©ª«¬¯°±²³´µ¶·¸¹º»¼½¾¿，．゛゜￣ヽヾゝゞ〃仝〆―‐／＼∥...‥'"〔〕［］〈〉《》【】－×÷≠≦≧∞∴♂♀′″℃￠￡＆☆★○●◎◇◆■△▲▽▼※〒→←↑↓〓∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡◯ゎゐゑヮヰヱwoff形式のフォントファイルに変換
WOFFコンバータ
opentype.jp
WOFFコンバータをダウンロード変換前ファイルにサブセット化したフォントファイルを指定して変換開始するとwoff形式のフォントファイルが出力される
ここでは、 「 notosansjp-regular.woff 」「 notosansjp-bold.woff 」を出力ファイル名とした
CSSでフォント指定
- フォントディレクトリ(ここではhoge)を作成して、出力したwoffファイルを置く(出力した際のファイル名は)
@font-faceでフォントを読み込む ※srcのurlはファイルのパスを記述
@font-face {
font-family: "Noto Sans JP";
font-style: normal;
font-weight: normal;
src: url('hoge/notosansjp-regular.woff') format("woff");
}
@font-face {
font-family: "Noto Sans JP";
font-style: normal;
font-weight: bold;
src: url('hoge/notosansjp-bold.woff') format("woff");
}
html[lang="ja"] {
font-family: 'Noto Sans JP', ...., Meiryo, sans-serif;
}