nikkeyl
  • Telegram

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

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

16

5 分。

定義

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

構造とセマンティクス

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

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

Google Fonts（Next.js を使用） 組み込みソリューションを使用することで、レイアウトシフト（CLS）の自動解消とフォントのローカル読み込みが実現されます。

項目説明
ツール@next/font/google
最適化CLSの自動解消、フォントのローカル読み込み
displayデフォルトで swap
推奨事項CSS変数（variable）を使用する

フォントの設定（app/fonts.ts）：

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

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

ルートレイアウトでの適用 (app/layout.tsx):

import { inter } from './fonts';

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

CSSでの使用（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 の読み込み

項目説明
配置<head> セクション内
display&display=swap を追加する
Preconnect最初のリクエストを高速化するために推奨

例:

<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">

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

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

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

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

視覚的なレスポンシブ性への影響

  • CLS (Cumulative Layout Shift) は、フォントのローカル読み込みと font-display: swap によって解消されます;
  • フォールバックフォント により、メインフォントが完全に読み込まれるまでテキストが即座に表示されます;
  • CSS変数の使用により、タイポグラフィの管理が容易になり、テーマ化のサポートが向上します;
  • フォントの適切な読み込みは、インターフェース全体のレスポンシブ性を高め、サイトとのインタラクションを快適なものにします。
記事は随時更新されます

類似カテゴリ:

関連記事

  • 基準SSF-U - フルスクリーン表示の統一規格

    SSF-U - フルスクリーン表示の統一規格

    SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    23

    4 分。

  • 基準SSA - アコーディオンの統一標準

    SSA - アコーディオンの統一標準

    SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています

    277

    5 分。

  • アドバイスウェブサイトにおける悪い慣行

    ウェブサイトにおける悪い慣行

    ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogle・Yandexでの検索順位を低下させる理由

    90

    2 分。

  • 基準SSP - ページネーションの統一規格

    SSP - ページネーションの統一規格

    SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています

    180

    3 分。

  • 基準SSPS - プロジェクト構造の統一基準

    SSPS - プロジェクト構造の統一基準

    SSPS標準は、プロジェクト内のファイルおよびフォルダの構造と命名に関する要件を規定しています

    121

    3 分。

  • 基準SSG - Gitの統一標準

    SSG - Gitの統一標準

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

    18

    6 分。

  • すべての記事

プロジェクトの種類*