GoogleWebFonts「Noto Sans Japanese」を使う

GoogleWebFonts「Noto Sans Japanese」を使う

Google と Adobe が共同開発した日本語フォント。可変フォント対応済みで font-weight 100〜900 を1リクエストで取得できる。

設置方法

HTML の <head> に下記を記述(preconnect でパフォーマンス向上)。

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

SCSS / CSS での指定例:

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400; /* 100〜900 で指定可 */
}

font-weight の目安

100=Thin / 300=Light / 400=Regular / 500=Medium / 700=Bold / 900=Black

旧記法(廃止)

以前使用していた earlyaccess URL は廃止済みのため使用不可。

<!-- 旧:使用禁止 -->
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<!-- 旧フォント名も変更: Noto Sans Japanese → Noto Sans JP -->

Cordingカテゴリの最新記事