font-format | font-tech etc

[Thorin-Oakenpants]

font types: e.g. woff, woff2, svg opentype, graphite, COLRv1, etc

accumulated links

• https://bugzilla.mozilla.org/show_bug.cgi?id=1786493
• example tests: https://phabricator.services.mozilla.com/D155360
• https://drafts.csswg.org/css-conditional-5/#at-supports-ext
• https://css3test.com/
• https://pixelambacht.nl/chromacheck/ but uses canvas so not suitable
  • but I am interested in the strings - https://github.com/RoelN/ChromaCheck/blob/master/chromacheck.js

---

CSS

/* if font-tech is not supported, we end up with "not font-tech" */
/* so we only have two choices: n/a or supported */
#cssCOLRv0:after{content:"n/a";}
@supports font-tech(color-COLRv0){#cssCOLRv0:after{content:"supported";}}
/*@supports not font-tech(color-COLRv0){#cssCOLRv0:after{content:"not supported";}} */

#cssCOLRv1:after{content:"n/a";}
@supports font-tech(color-COLRv1){#cssCOLRv1:after{content:"supported";}}

#cssOpenType:after{content:"n/a";}
@supports font-tech(feature-opentype){#cssOpenType:after{content:"supported";}}

/* if font-format is not supported, it doesn't fire "not font-format" */
/* so we only have two choices: n/a or supported: i.e we can't return not supported by default */
#cssWoff2:after{content:"n/a";}
@supports font-format(woff2){#cssWoff2:after{content:"supported";}}

CSS.supports

edit: 71c5470

FONT FACE

see example for woff2: lightening fast -

TZP/js/fonts.js

Line 968 in 98431ac

const font = new FontFace('t', 'url("data:font/woff2;base64,d09GMgABAAAAAADwAAoAAAAAAiQAAACoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAALAogOAE2AiQDBgsGAAQgBSAHIBuDAciO1EZ3I/mL5/+5/rfPnTt9/9Qa8H4cUUZxaRbh36LiKJoVh61XGzw6ufkpoeZBW4KphwFYIJGHB4LAY4hby++gW+6N1EN94I49v86yCpUdYgqeZrOWN34CMQg2tAmthdli0eePIwAKNIIRS4AGZFzdX9lbBUAQlm//f262/61o8PlYO/D1/X4FrWFFgdCQD9DpGJSxmFyjOAGUU4P0qigcNb82GAAA") format("woff2")', {});

graphite causes errors

function get_graphite() {
	// current: uncaught errors
	// downloadable font: post: Failed to read table header...
	// downloadable font: post: Failed to parse table...
	// downloadable font: rejected by sanitizer...
	// downloadable font: font load failed...
	// Uncaught (in promise) DOMException: A network error occurred
	return new Promise(resolve => {
		try {
			if (!("FontFace" in window)) {
				return resolve("blocked")
			}
			const supportsGraphite = (function(){
				// graphite
				const font = new FontFace('g', 'url(data:font/truetype;base64,AAEAAAAKAIAAAwAgT1MvMgAAAAAAAAEoAAAAVmNtYXAAAAAAAAABiAAAACxnbHlmAAAAAAAAAbwAAAAkaGVhZAAAAAAAAACsAAAAOGhoZWEAAAAAAAAA5AAAACRobXR4AAAAAAAAAYAAAAAGbG9jYQAAAAAAAAG0AAAABm1heHAAAAAAAAABCAAAACBuYW1lAAAAAAAAAeAAAAAgcG9zdAAAAAAAAAIAAAAAEAABAAAAAQAAAkgTY18PPPUACwAgAAAAALSRooAAAAAAyld0xgAAAAAAAQABAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEAAAACAAIAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACMAIwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAMAAQAAAAwABAAgAAAABAAEAAEAAABB//8AAABB////wAABAAAAAAAAAAgAEgAAAAEAAAAAAAAAAAAAAAAxAAABAAAAAAABAAEAAQAAMTcBAQAAAAAAAgAeAAMAAQQJAAEAAAAAAAMAAQQJAAIAAgAAAAAAAQAAAAAAAAAAAAAAAAAA) format("truetype")', {});

				font.load()
				return font.status == "loaded" || font.status == "loading"
			})()
			let value = (supportsGraphite ? "enabled" : "blocked: check your console")
			return resolve(value)
		} catch(e) {
			return resolve("error")
		}
	})
}
get_graphite()

[Thorin-Oakenpants]

71c5470 for starters

• FontFaceSourceTechFlags from https://phabricator.services.mozilla.com/D154399
• StyleFontFaceSourceFormatKeyword from https://searchfox.org/mozilla-central/source/gfx/thebes/gfxPlatform.cpp#1799

edit: bit miffed SVG didn't mean SVG opentype

I might have to revisit this, not sure if I got it all correctly

[Thorin-Oakenpants]

https://bugzilla.mozilla.org/show_bug.cgi?id=1788036 Pluralize feature-* to features-* in font-tech keywords

[Thorin-Oakenpants]

https://bugzilla.mozilla.org/show_bug.cgi?id=1786804 - layout.css.font-tech.enabled FF105+