【コピペ用】ベトナム語Webフォント実装キット｜CSS一式・文字化け対策
ベトナム語（声調記号付きラテン文字）を文字化けなく表示するためのCSS実装一式です。そのままコピペで動きます。WindowsでもMacでも崩れない設定を、制作実務で使う順に並べました。
1. これをコピーすれば終わり（基本のfont-family）
body {
font-family: "Noto Sans", "Roboto", "Helvetica Neue", Arial, sans-serif;
}Noto Sansはベトナム語の全声調記号をUnicodeで網羅。まずこれで9割解決します。
2. Google Fontsの読み込み（3パターン）
① HTMLのheadに置く（最速・推奨）
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
② CSSの@importで読む
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
③ セルフホスト（@font-face）
@font-face {
font-family: "Noto Sans VN";
src: url("/fonts/NotoSans-Regular.woff2") format("woff2");
font-display: swap;
unicode-range: U+0000-00FF, U+0102-0103, U+0110-0111, U+0128-0129,
U+0168-0169, U+01A0-01B0, U+1EA0-1EF9;
}③のunicode-rangeはベトナム語専用拡張字（Ơ Ư Ạ Ệ 等）を含む範囲。不要字を読み込まず高速化します。
3. 文字化け・豆腐（□）を防ぐチェックリスト
- HTMLに
<meta charset="UTF-8">がある <html lang="vi">（ベトナム語ページの場合）を指定- サーバー／DBの文字コードがUTF-8（Shift_JIS厳禁）
- CSSのfont-familyにUnicode対応フォントを最優先で指定
- ファイル保存時のエンコードがUTF-8（BOMなし推奨）
4. 動作確認用サンプル（コピペして表示崩れチェック）
Tiếng Việt rất đẹp. Phở, bánh mì, cà phê sữa đá.
ĐƯỜNG – GIỜ – NGHIÊNG – TUỆ – QUỲNH上が全て正しく表示されればフォント実装は成功です。□や?になる字があればfont-familyかcharsetを見直してください。
コピペで解決しないなら、まるごと任せてください
多言語WordPress、表示速度、サーバー選定、デザイン崩れまで。このキットを書いた制作者が、ベトナム語サイトを実装代行します。スポット1件から対応・相談無料。