やりたいこと
ベトナム語（声調記号付き文字）を正しく表示したい。
具体的には以下のような状態を解消する。
文字が□（豆腐）になる
一部の文字だけ欠ける
文字化けする
ベトナム語サイトの制作・文字化け対応で止まっていませんか？
この記事を書いた制作者が、フォント実装・多言語WordPress構築・文字化け解消までまとめて対応します。相談・お見積もりは無料。1件のスポット修正からサイト一式まで。
※フォーム1分。営業メールは送りません。
コピペするだけ。ベトナム語フォントのCSS実装一式を無料配布中
結論：ベトナム語フォントが表示されない原因
・フォントが未対応
・文字コードがUTF-8でない
・CSSの指定ミス
→ Noto Sansを使えばほぼ解決します
具体的な解決方法
原因はほぼ「フォント未対応」か「環境設定」です。
以下の手順で対応できます。
① ベトナム語対応フォントを使う
まずはフォントを確認します。
日本語フォントではベトナム語に完全対応していないことがあります。
対応しているフォント例
Noto Sans
Noto Serif
Roboto
Google Fontsのフォントであれば基本的に問題ありません。
Google Fontsなら無料で使えて商用利用も可能。
CSSで指定する場合は以下のように設定します。
body {
font-family: 'Noto Sans', sans-serif;
}
② フォントをインストールする
Windowsの場合
フォントファイルをダウンロード
右クリック → インストール
Macの場合
フォントファイルをダウンロード
Font Bookで追加
③ 文字コードをUTF-8にする
HTMLやCSVなどで文字化けする場合は、文字コードを確認します。
UTF-8でない場合、正しく表示されません。
④ CSSのフォント指定を確認する
意図しないフォントが当たっているケースがありますので、下記を確認
- 親要素で上書きされていないか
- フォールバック指定が適切か
例：
body {
font-family: 'Noto Sans', 'Helvetica', sans-serif;
}
動作メモ
Noto Sansを指定するとほぼ確実に表示できる！
メイリオでも一部表示できるが、完全ではないです。
それと初歩的ですが、ブラウザキャッシュが原因で反映されないことがある。
古い環境ではフォントインストールが必要になる場合もあり。
補足
どうしても表示されない場合、キャッシュと同様に初歩的ですが「フォント指定漏れ」が原因の可能性は結構高めです。
特にリセットCSSやテーマ側の影響で上書きされているケースに注意。
関連記事
ベトナム語フォントをMacで表示する方法
ベトナム語フォントがWindowsで表示されない原因と解決方法
ベトナム語フォントをCSSで正しく表示する方法【文字化け・表示崩れ対策】
ベトナム語フォントまとめ
