font types: e.g. woff, woff2, svg opentype, graphite, COLRv1, etc
accumulated links
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 -
|
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()
font types: e.g. woff, woff2, svg opentype, graphite, COLRv1, etc
accumulated links
CSS
CSS.supports
edit: 71c5470
FONT FACE
see example for woff2: lightening fast -
TZP/js/fonts.js
Line 968 in 98431ac
graphite causes errors