SSF-O - フォントの統一規格（Local、Google Fonts）

25/12/30

4 分。

定義

SSF-O 標準は、フォントのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

構造とセマンティクス

現代のフレームワーク（Next.js、Nuxt、Gatsby）向けの最適な導入方法

現代の環境では、フォントを自動的に最適化するための組み込みツールの使用が推奨されています。

NextJSの組み込みソリューションを使用することで、レイアウトシフト（CLS）の自動解消、フォントのローカル読み込み、および display=swap の追加が可能になります。

import { Inter } from 'next/font/google';

const inter = Inter({
  weight: ['400', '500', '700'],
  subsets: ['cyrillic', 'latin'],
  variable: '--font-inter',
});

export { inter };

Layoutでの使用方法：

import { inter } from './fonts';

<html lang="ru" className={inter.variable}> 
  <body>{children}</body>
</html>

global.css での使用方法：

body {
  font-family: var(--font-inter), sans-serif; 
}

"純粋な"HTML/CSS/JSおよびCMSに最適なフォント読み込み方法

静的サイトやCMSでは、アクセシビリティを確保し、正しく表示させるために、フォントの読み込みを独自に管理することが重要です。

ローカル接続（@font-face）が最善の方法です：

項目	説明
フォーマット	WOFF2（最高の圧縮率とサポート）
配置場所	`public/fonts/` または `assets/fonts/`
クリティカルCSS	`@font-face` はメインのCSSファイルの先頭に記述する必要がある
フォールバックフォント	CLSの解消を保証する

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2"); 
  font-weight: 400; 
  font-style: normal; 
  font-display: swap;
}

body {
  font-family: "Inter", sans-serif; 
}

<link> を使用して Google Fonts を設定する方法：

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

インタラクティブ性と視覚的な反応

CLS (Cumulative Layout Shift)は、フォントのローカル読み込みとfont-display: swap;によって軽減されます。また、メインのフォントが完全に読み込まれるまでテキストを瞬時に表示するためのフォールバックフォントも忘れてはなりません。

非推奨／旧式の方法（避けるべき）

フォントの読み込みが正しく行われないと、ページの表示が遅くなり、ユーザー体験が低下する可能性があります。

方法	例	問題
CSSでの`@import`	`@import url("…");`	リソースの並列読み込みをブロックする
WOFF2以外の形式	`.ttf`, `.eot`, `.svg`, `.woff`	旧式でファイルサイズが大きい
`font-display: swap;`の欠如	swapなしの `@font-face { … }`	FOIT - フォントの読み込み完了までテキストが表示されない

類似カテゴリ:

アドバイス
Reactコンポーネントの構造
各Reactコンポーネントがどのような外観であるべきか、私の考え
103
26/04/19
12 分。
基準
SSF-U - フルスクリーン表示の統一規格
SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
33
26/02/03
3 分。
基準
SSA - アコーディオンの統一標準
SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています
50
26/01/19
4 分。
アドバイス
ウェブサイトにおける悪い慣行
ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogle・Yandexでの検索順位を低下させる理由
46
25/12/30
2 分。
基準
SSP - ページネーションの統一規格
SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
56
25/12/30
3 分。
基準
SSPS - プロジェクト構造の統一基準
SSPS標準は、プロジェクト内のファイルおよびフォルダの構造と命名に関する要件を規定しています
165
25/12/30
3 分。
すべての記事