font-format | font-tech | testing of font types e.g. via base64 #189
Description
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 -
Line 968 in 98431ac
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()