Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: @font-face src OpenType collection support #6566

Open
mjpieters opened this issue Jan 12, 2023 · 0 comments
Open

Suggestion: @font-face src OpenType collection support #6566

mjpieters opened this issue Jan 12, 2023 · 0 comments

Comments

@mjpieters
Copy link

mjpieters commented Jan 12, 2023

There is very little information to be found on browser support for OpenType collections, so font files with the .otc and .ttc extensions.

The CSS3 font standard has this to say on @font-face src references to collections:

Similarly, font container formats that can contain more than one font must load one and only one of the fonts for a given @font-face rule. Fragment identifiers are used to indicate which font to load; these use the PostScript name of the font as defined in [RFC8081].

So, for a collection of fonts in, say, a .ttc file, you should be able to use:

@font-face {
    font-family: <name>
    src: url(url/to/collection.ttc#IndividualFont) format(collection);
}

A tool like fc-scan from the fontconfig OSS library can be used to find the PostScript names of a font collection file (grep for postscriptname).

Using a collection like this could have big advantages as a collection file can be smaller than the individual font files when glyph data is shared between fonts, and so you can potentially safe bandwidth as well as cut down on the number of requests, when a collection covers multiple web fonts differentiated by the fragment identifiers.

Information on what browsers actually support this is scarce. The only concrete evidence one way or another I can find on this is that Firefox doesn't support collections yet. Chrome doesn't produce errors when you try to use a collection in a @font-face, but the fragment identifier does nothing and the font face doesn't actually work as far as I can make out. Safari won't load the resource so presumably also doesn't support collections.

But, most frustratingly, it's not even mentioned on CanIUse, making this a big giant hole in the collective knowledge. Can it be added?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants