IcoMoon を使用してアイコン Web フォントを生成し、FontSquirrel を使用して TTF ファイルを WOFF および WOFF2 ファイルに変換しました。
WOFF ファイルは IE ユーザーが使用し、WOFF2 は他のすべてのブラウザーで使用されます。
FontSquirrel でこれらの設定を使用しました。
- Truetype ヒント: 既存のものを保持
- レンダリング: GASP テーブルを修正
- 垂直指標: 垂直指標の自動調整
- 不足しているグリフの修正: スペース、ハイフン
- エックスハイトマッチング: なし
- サブセット化: サブセット化なし
- 詳細オプション - Em Square 値: 2048; グリフ間隔の調整: 0
私が持っているすべてのデバイスとブラウザー (Windows、Linux、Android、iPhone、すべてのブラウザー) でテストしたところ、WOFF2 ファイルは完全に機能しました。
Apache は で応答しContent-Type: font/woff2、CORS の問題はありません。
ただし、一部のユーザーは、サイト上のすべてのアイコンが十字 (☒) の付いた四角形として表示されていると報告しています。
問題を報告したユーザーは以下を使用しています:
- Android 9 の Chrome v84 (Huawei Y6 2019)
- Android 8 (Samsung Galaxy S7) 上の Chrome v89
@font-face代わりに WOFF ファイルを使用するように変更すると、これは解決されました。
同様の方法で WOFF2 と共に提供される Google フォント (自己ホスト型) もいくつか持っています。これらのフォントは、上記の問題を報告したユーザーのデバイスでうまく機能します。
一部のデバイスで、自己ホスト型の Google フォント WOFF2 が機能するのに、生成したアイコン/グリフ WOFF2 ファイルが機能しない理由はありますか?