HTML / CSS

webフォントの設定

@font-face

独自フォントを指定するセレクタです。

基本構文はfont-familyプロパティで使用したいフォント名を使用し、srcプロパティでファイルのリンクを指定

ファイル形式変更

「google Fonts」等からダウンロードすると「.ttf」のみなので、「ファイルコンバーター」を使って「.woff2」「.woff」を作成する

・CloudConvert ファイルコンバータ

複数ブラウザに対応させるためのCSS記述例（.woff2 / .woff / .ttf 対応）

幅広いブラウザに対応した@font-faceの記述例

_fonts.scss （例：Noto Sans JP）
                  
//font-family
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/assets/fonts/NotoSansJP-Regular.woff2') format('woff2'),
    url('/assets/fonts/NotoSansJP-Regular.woff') format('woff'),
    url('/assets/fonts/NotoSansJP-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/assets/fonts/NotoSansJP-Medium.woff2') format('woff2'),
    url('/assets/fonts/NotoSansJP-Medium.woff') format('woff'),
    url('/assets/fonts/NotoSansJP-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/assets/fonts/NotoSansJP-Bold.woff2') format('woff2'),
    url('/assets/fonts/NotoSansJP-Bold.woff') format('woff'),
    url('/assets/fonts/NotoSansJP-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
_layout.scss（例：Noto Sans JP）
                  
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
WOFF2

Web Open Font Format 2.0【最推奨】

圧縮率: 最も高い圧縮率（従来比30%削減）

ブラウザサポート: モダンブラウザ全般（Chrome , Firefox , Safari , Edge）

特徴: 現在最も推奨される形式で、ファイルサイズが小さく読み込み速度が速い
WOFF

Web Open Font Format

圧縮率: TTFより約40%軽量

ブラウザサポート: 広範囲（IE9+を含む）

特徴: WOFF2に対応していない古いブラウザ向けのフォールバック用
TTF

TrueType

圧縮率: 非圧縮のため最もファイルサイズが大きい

ブラウザサポート: ほぼ全ブラウザ

特徴: 最終的なフォールバック用として使用