ベトナム語フォントをCSSで正しく表示する方法【文字化け・表示崩れ対策】

やりたいこと

Webサイトでベトナム語（声調記号付き文字）をCSSで正しく表示したい。

具体的には以下の状態を解消する。

文字が□（豆腐）になる
一部の文字が欠ける
CSS指定しても表示されない

解決方法

ベトナム語フォントをCSSで正しく表示するには、以下のポイントを押さえます。

① ベトナム語対応フォントを指定する

CSSでベトナム語対応フォントを明示的に指定します。

対応フォント：

Noto Sans
Noto Serif
Roboto

body {
  font-family: 'Noto Sans', 'Helvetica', sans-serif;
}

② フォントのフォールバックを設定する

ベトナム語フォントが読み込めない場合に備えて、フォールバックを設定します。

body {
  font-family: 'Noto Sans', 'Arial', sans-serif;
}

③ Google Fontsでフォントを読み込む

フォントがローカルにない場合は、外部から読み込みます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">

④ クラス単位で指定する（任意）

特定の要素だけベトナム語フォントを適用することも可能です。

.vietnamese {
  font-family: 'Noto Sans', sans-serif;
}

⑤ 文字コードをUTF-8にする

CSSだけでなくHTMLの文字コードも重要です。

<meta charset="UTF-8">

動作メモ

Noto Sansを指定するとほぼ問題なく表示できる
フォント未読込時はフォールバックに切り替わる
CSSの上書き順に注意（!importantの影響）
ブラウザキャッシュで反映されない場合あり

補足

Web制作では「フォントの読み込み」と「CSS指定」のどちらかが原因のことがほとんどです。

関連記事

ベトナム語フォントが表示できない時の解決方法
ベトナム語フォントをMacで表示する方法
ベトナム語フォントがWindowsで表示されない原因と解決方法
ベトナム語フォントまとめ