search

webhintio / hint

💡 A hinting engine for the web
https://webhint.io/
Apache License 2.0
3.61k stars 667 forks source link

Add rule to check for mismatched @font-face #1097

Open ffoodd opened 6 years ago

ffoodd commented 6 years ago

@zachleat came up with faux-pas, wich description is:

A script to highlight elements that are mismatched incorrectly to @​font-face blocks, which may result in > shoddy faux bold or faux italic rendering.

Not really an error, but certainly something to warn about.

molant commented 6 years ago

This sounds like a great idea. Some things to figure out:

  1. Looks like it uses the CSS Font Loading API. I'm not sure that JSDOM supports that (the connector we are using in the online service) so we will have to see if there's any workaround for this
  2. We will need to do some modifications to return the element with the mismatch so it works with report(), we don't do any highlight

@zachleat from what I see in here you are using the fonts API to know which ones have been loaded, is that right? Wonder if we can use a polyfill like fontloader or font face observer for the connectors that do not support it. Have you done any tests with any?

zachleat commented 6 years ago

I’m almost certain that JSDOM does not support the CSS Font Loading API. I was using JSDOM for the GlyphHanger project and migrated off (for this and other reasons).

The important piece of the CSS Font Loading API is that it includes a collection of web fonts in use on the page. Neither fontloader or fontfaceobserver have that functionality. Do y’all have something that parses CSS? You’d need to take that method to find any and all @​font-face blocks in use. That’d be the missing piece there.

molant commented 6 years ago

We don't have a CSS parser but want to add one at one moment or another. One option would be to not wait and create the rule "limited" to only chrome (and thus the cli) until we figure out how to support this on jsdom.