オープンソース版VtigerCRM(特にバージョン7系)において、custom.cssなどで修正を加えない場合(デフォルト状態)のフォント仕様は以下のようになります。
1. 欧文(英数字)のフォント
VtigerCRMはデフォルトで 「Open Sans」 というGoogleフォントを最優先で指定しています。
したがって、アルファベットや数字は、OSに関わらず基本的にこの「Open Sans」で表示されます。
2. 日本語(漢字・ひらがな・カタカナ)のフォント
ここが重要な点ですが、「Open Sans」には日本語グリフ(文字のデザイン)が含まれていません。
そのため、ブラウザは「Open Sans」で表示できない日本語文字に遭遇すると、CSSの指定にある「次の候補(Arial, Helveticaなど)」を探し、それでもなければ「ブラウザとOSの標準的なゴシック体(sans-serif)」に丸投げします。
結果として、OSごとに以下のような表示になります。
| OS | 表示される日本語フォント(一般的挙動) | 特徴 |
| Windows 10/11 | メイリオ (Meiryo) または 游ゴシック (Yu Gothic) | ブラウザの設定によりますが、メイリオになることが多いです。游ゴシックの場合は線が細くかすれて見えることがあります。 |
| macOS | ヒラギノ角ゴ (Hiragino Kaku Gothic) | 非常に綺麗に表示されますが、Windowsとの見た目の差が激しくなります。 |
| Android / iOS | Noto Sans CJK または Hiragino | 各モバイルOSのシステムフォントになります。 |
3. その結果起こる「見た目の違和感」
修正を加えない場合、以下のような現象(いわゆる「中華フォント化」や「ガタツキ」)が起きやすくなります。
- 「英数字」と「日本語」の不一致:
- 英数字は「Open Sans」、日本語は「メイリオ」など、異なるフォントが混ざって表示されるため、文字の太さやベースライン(高さ)が微妙にズレて、文章がガタガタに見えることがあります。
- Windowsでの視認性低下:
- 特に游ゴシックが適用された場合、Vtigerのデフォルトの文字色は少し薄いグレーであるため、バックライトの明るいモニターでは文字が「細くて薄い」状態になり、非常に読みづらくなります。
- 入力フォームのズレ:
- フォントによって文字幅が異なるため、入力フィールドの中で文字が上下に寄ってしまったりすることがあります。
Chromeなどのブラウザのバージョンアップ時にブラウザ側のデフォルトフォントが変更されることで、『VtigerCRMのフォント表示が変わってしまう』ことがあります。その場合は、ブラウザ側のデフォルトを修正してください。
結論
修正を加えない場合、「英数字はおしゃれ(Open Sans)だが、日本語はOS任せで統一感がない」 状態になります。
VtigerCRM側でデフォルトフォントを指定することも可能です。
custom.cssというcssファイルの作成と一部のソースファイル修正が必要です。
custom.cssによるデフォルトフォントの指定は、見た目だけでなく、画面表示の改善につながるケースがあります。指定するデフォルトのフォントをOS標準搭載のフォントにすることです。そうすることで、VtigerCRMがフォントを外部に探しに行く必要がなくなるため、画面表示がスムーズになります。
custom.cssファイルの作成が気になる方はお問合せください。