filamentgroup / woff2-feature-test Goto Github PK

View Code? Open in Web Editor NEW

106.0 15.0 11.0 18 KB

A simple feature test for the WOFF2 font format

License: MIT License

JavaScript 65.52% HTML 34.48%

font web-fonts

woff2-feature-test's Introduction

⚠️ This project is archived and the repository is no longer maintained.

woff2-feature-test

A simple feature test for the WOFF2 font format.

Available on NPM as woff2-feature-test

Use Case

Given that we use loadCSS to asynchronously load a stylesheet containing all of our typefaces as data URIs, we need a way to programmatically determine if the WOFF2 format is supported in the browser.

var fontFile = "/url/to/woff.css";

// Use WOFF2 if supported
if( supportsWoff2 ) {
	fontFile = "/url/to/woff2.css";
}

loadCSS( fontFile );

Requirements

Must not make an HTTP request to a remote server, anything using a remote test file was out.
Prefer a synchronous approach to an asynchronous one, we want it to execute and the result to be available immediately.
More than just an inference. It was suggested that we could infer based on the existence of the Font Loading API given that it currently matches support for WOFF2. But what happens if a browser implements the Font Loading API but doesn’t implement WOFF2? This scenario seemed entirely possible and we didn’t want any false positives.

Approach

We use the Font Loading API to load an empty WOFF2 data URI and see if the font set status is loading or not. If it attempts to load, the format is supported. If it does not, the format is unrecognized (see the intentionally failing test with an imaginary format).

Demo

If a browser eventually implements the WOFF2 format but does not implement the Font Loading API, this script will report a false negative (which is preferable to the false positive scenarios described above).

Limitations

Note that if you use a restrictive Content Security Policy header on font-src, that can cause issues with this feature test.

You’ll also need to make sure your Content Security Policy allows Data URIs.

For example, github.com (not github.io) uses Content-Security-Policy:default-src *; font-src assets-cdn.github.com; which denies our @font-face Data URI.

Addendum

A few previous revisions of this script can be found on a gist.

woff2-feature-test's People

Contributors

Stargazers

Watchers

Forkers

vitaliy-hnatyk baamenabar kurtextrem veeracs roeln joeux arviz mytory

woff2-feature-test's Issues

Error trying construct FontFace

The third (optional) argument FontFaceDescriptors is missing and causing some browsers (Chrome 35 and 36, Opera 22 and 23) to throw an error resulting in no custom fonts at all.

Uncaught TypeError: Failed to construct 'FontFace': 3 arguments required, but only 2 present.

Win7 Fx alpha mis-reporting it seems

Chrome Version 39.0.2171.27 beta-m (64-bit): Enabled
Fx/Aurora 35.0a2 (2014-10-18): Not Enabled
Mozilla just patched WOFF2, about:config says it is on, & my cache looks like I downloaded .woff2 files from Google Fonts.
ty

Throws an error in older Firefox versions

"win.FontFace is not a constructor."
http://prntscr.com/9425z4

Triggers pagespeed insights; font-display property

adding to end (descriptors arg)
{'display': 'swap'}, and replace t with something it can swap with (sans-serif).

However it still doesn't pass the test in insights. Not sure if a solution exists.
Seems more like a flaw in the function new FontFace();

Content Security Policy conflicts

Just a note that this script will throw an error on sites with a content security policy that disallows data uris. Github's CSP is a good example. If you run the test from console on this site you'll get this:

Passing the test triggers a waring in Chrome.

When run on Chrome it triggers a warning
Failed to decode downloaded font: data:application/font-woff2, ...
If you open the console you will see the warning.
Firefox fails the test so it doesn't give the warning.
Happens on Canary too.

This is a minor minor thing, but it had me baffled for about an hour, I thought the problem was from the fonts I was loading.

You could write a warning about the warning on the on the readme.md or I can do a pull request.

Doesn't detect new Edge

Doesn't work in new Edge that coming with WOFF2 support, but WITHOUT FontFace API (Microsoft is good for making things different :))

New WOFF2 file seems to trigger an error in Firefox v47

http://prntscr.com/c4er2l
ref #15

`win` is undefined

I've tried including the feature test in the head, before closing body tag, and inlined in my source, and even removing all other scripts. In Chrome I get the error:

Uncaught TypeError: Cannot use 'in' operator to search for 'FontFace' in undefined

In Firefox I get a similar error. Oddly, the demo page works fine for me.

Any ideas? Thanks.

My final goal is to inline this feature test in the head and create prefetch links to the smallest supported font files.

Unhandled promise rejection in Chrome

Not sure if this is Chrome bug or something else but since latest browser update (v 40.0.2214.91 m), Chrome started displaying "Unhandled promise rejection" (I checked in Firefox and Opera and there where no errors so it's only Chrome for now). Apparently, this happens because promise that load() method returns gets network error that is unhandled.

I fixed this by modifying following line but still not sure why this started happending:

f.load().catch(function(){});

Question: Why IIFE?

Just out of curiosity, why are you using IIFE style instead of just a normal function or function expression?

I'm quite sure you know what you do and there is a reason behind, would love to know it 💃

Cheers and thanks for sharing this nice feature detection :)