I generated an Icon webfont using IcoMoon, and then used FontSquirrel to convert the TTF file to WOFF and WOFF2 files.
The WOFF file is to be used by IE users, and WOFF2 in all other browsers.
I used these settings in FontSquirrel:
- Truetype Hinting: Keep Existing
- Rendering: Fix GASP Table
- Vertical Metrics: Auto-Adjust Vertical Metrics
- Fix Missing Glyphs: Spaces, Hyphens
- X-height Matching: None
- Subsetting: No Subsetting
- Advanced Options - Em Square Value: 2048; Adjust Glyph Spacing: 0
I tested in every device and browser I have (Windows, Linux, Android, iPhone, all browsers), and the WOFF2 file works perfectly.
Apache responds with Content-Type: font/woff2, and there's no CORS issue.
However, some users reported that all icons on the site are showing as a square with a cross (☒).
The users who reported the problem are using:
- Chrome v84 on Android 9 (Huawei Y6 2019)
- Chrome v89 on Android 8 (Samsung Galaxy S7)
This was resolved once I changed the @font-face to use the WOFF file instead.
I also have some Google Fonts (self-hosted), served with WOFF2, in a similar way, and those fonts work well on those devices of the users who reported the problem above.
Any ideas why, on some devices, would self-hosted Google Fonts WOFF2 work, but not the Icons/Glyphs WOFF2 file I generated?