Search code examples
cssgoogle-chromebrowserfontswebfonts

Can web browsers render embedded bitmaps from webfonts?

I've been referencing the findings in this thread and in this question when trying to get a custom font that uses embedded bitmaps to render them via @font-face, and in my experimentation with fonts that I know are configured correctly, I found the following results displaying 日本語 using Windows 10 and Vivaldi (Chrome, etc), with ClearType on and configured (unsure if this matters):

span {
  font-family: "SimSun"; // or just omitted, since this is a fallback font
}

Defaulting to system font

@font-face { font-family: "font"; font-weight: normal; src: url('simsun_0.ttc'); }
span {
  font-family: "font";
}

Explicitly declaring same font loaded with font-face

simsum_0.ttc is the font that I pulled from C:/Windows/Fonts/ and placed in the folder where the css lives. I've also verified that this file does indeed have embedded bitmaps and is configured correctly.

I've since just installed the font I'm working on and referenced it via its system name, which then loads the bitmaps correctly. Is there any way to get browsers to load the bitmaps from fonts loaded via @font-face? Is there any documentation or spec on this limitation, or possible work-arounds?

More examples

This works the same for custom-built fonts as well - here's an example with an .otf font in Chrome. The font loaded via it's name when installed on the system:

Called via name

and the same font loaded via @font-face's url:

Called via font-face

Solution

  • Chrome and Firefox (and likely others) run OTS on the fonts not available in the system, which removes the EBDT & EBLC tables (where the bitmaps are stored) from the font.

    From the OTS readme:

    The OpenType Sanitizer (OTS) parses and serializes OpenType files (OTF, TTF) and WOFF and WOFF2 font files, validating them and sanitizing them as it goes.

    The C library is integrated into Chromium and Firefox, and also simple command line tools to check files offline in a Terminal.

    The CSS font-face property is great for web typography. Having to use images in order to get the correct typeface is a great sadness; one should be able to use vectors.

    However, on many platforms the system-level TrueType font renderers have never been part of the attack surface before, and putting them on the front line is a scary proposition... Especially on platforms like Windows, where it's a closed-source blob running with high privilege.

    In 2014, there was interest in adding color bitmap tables to Chromium, and support was added to pass-through the color bitmap (CBDT & CBLC) tables to OTS, so it seems possible that support could be added for these as well, if the browser requests it.

    The steps I see to make this possible are:

    1. Add the ability to pass-through the EBDT & EBLC tables to OTS. This is the current location of the code that passes the color tables through.
    2. Request that each project (Chromium, Firefox, etc) allow the pass-through.
    3. Wait for all the updated code to be pushed down-stream.

    There might be more complicated implementations of this sort of support (options in @font-face, etc), but this seems like the easiest, since the color tables are already supported (somewhat) in the same way.