目次
やりたいこと
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で表示されない原因と解決方法
ベトナム語フォントまとめ
