Font not working on macOS or iOS

[colecrouter]

I'm using opentype.js to modify the font files in bootstrap-icons (to strip out unused icons). It works on Windows and Android, but not on macOS or iOS. I suspected a WebKit error, but this occurs in Chrome on macOS. I also tried a WebKit browser on Windows to confirm, and it was fine.

Possible Solution

I honestly have no clue where the issue even lies. Given the scope, this might not even be an issue with opentype.js, but there's obviously something that's causing the outputted woff not to work, while the regular one does.

Steps to Reproduce (for bugs)

I have a function that looks like this:

function strip(path: string) {
  const buffer = await readFile(path);

  let data = path.endsWith('.woff2')
      ? (await decompress(buffer)).slice(0) // Need to slice, for some reason the buffer has wrong size
      : new Uint8Array(buffer);

  const font = parse(data.buffer);

  let output = new Uint8Array(font.toArrayBuffer());
  if (path.endsWith('.woff2') {
    data = await compress(data);
  }

  await writeFile(path, data);
}

It deals with woff or woff2 types, which is what bootstrap-icons exports. Even without modifying the underlying font data (as in the example), this issue occurs.

Your Environment

• Version used: 1.3.1
• Font used: Bootstrap Icons
• Browser Name and version: Chrome, Safari, Otter
• Operating System and version (desktop or mobile): macOS 10.15, iOS 15, Windows 11, Android 13, Ubuntu 23.04
• Link to your project: https://github.com/Mexican-Man/vite-plugin-purge-bootstrap-icons

Here's a zip with both the working unmodified version, and the "modified and broken" one.

I apologize for the lack of useful info; I genuinely don't know how I would go about debugging such a thing. Let me know if there's anything else I can do.

[ILOVEPIE]

Can you tell us what issue you're seeing on MacOS? Is it not displaying the characters? Is it displaying the wrong ones? If you could be a little more specific as to the issue it will help narrow down the cause.

[colecrouter]

Visually, it just shows the missing character box.

Aside from that, I'm not sure what exactly is happening. I'm viewing the font on a webpage, and the browser falls back onto another font (which presumably lacks those glyphs). Using the dev tools in Chrome/Safari (network tab), it appears to be happy, even showing a "preview" for the font (ABCDEFG– text). However, you can tell it's not loaded properly; I think bootstrap-icons has some actual Latin glyphs, and so the unmodified file has a "preview" that's different from the modified file (which looks like it falls back onto TNR or Helvetica or something similar).

I couldn't find a native way to load/view an OpenType file on macOS (on 10.15 at least), which I was hoping would give me more info about what's not working.

[ILOVEPIE]

Emoji font support isn't implemented in the library at the moment. This may be one reason. We'd have to check.