chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

同じfont-familyで普通文字と太字の正しい設定方法

css@font-face を設定する場合の方法を学びを共有します。

文字の太さの種類でフォントを設定する場合

@font-face {
  font-family: "Noto Sans CJK JP";
  font-weight: 400;
  font-style: normal;
  src:
    local("Noto Sans CJK JP"),
    url(NotoSansCJKjp-Regular.woff2) format("woff2"),
    url(NotoSansCJKjp-Regular.woff) format("woff"),
    url(NotoSansCJKjp-Regular.ttf) format("ttf");
}

@font-face {
  font-family: "Noto Sans CJK JP";
  font-weight: 700;
  font-style: bold;
  src:
    local("Noto Sans CJK JP"),
    url(NotoSansCJKjp-Bold.woff2) format("woff2"),
    url(NotoSansCJKjp-Bold.woff) format("woff"),
    url(NotoSansCJKjp-Bold.ttf) format("ttf");
}

normalbold の設定はこれでOK!

フォントファイルのフォーマット woff2 woff ttf はそれぞれデバイスによって対応がバラバラなので設定しておきます。

local の指定は、ローカルにそのフォントがある場合はそちらを参照するようになります。 自分のPCにこのフォントが入っている場合は余計な処理が発生しなくなるので設定しておいた方がいいでしょう。

あとは html なり body なりに font-family で設定しましょう。

例えば

h1 {
  font-weight: bold;
}

これで h1Noto Sans CJK JP が反映されるようになりました。

補足

@で(at-rule)書かれているのは、CSSスタイルシートを記述するにあたっての ルールを定義 しています。

@font-face は、ダウンロードされる外部フォントを定義します。