How to resolve font-face issues?

For technical support and bug reports for all editions of CSS HTML Validator, including htmlval for Linux and Mac.
Post Reply
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

How to resolve font-face issues?

Post by TomHTML »

Provided this font-face definition:

Code: Select all

        @font-face {
            font-family: 'Noto Sans';
            font-weight: 400;
            font-style: normal;
            src: url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nPY6323mHUZFJMgTvxaG2iE.eot);
            src: url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'), local('Noto Sans'), local('Noto-Sans-regular'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nJBw1xU1rKptJj_0jans920.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'), url(https://fonts.gstatic.com/l/font?kit=LeFlHvsZjXu2c3ZRgBq9nJbd9NUM7myrQQz30yPaGQ4&skey=2b960fe17823056f&v=v6#NotoSans) format('svg')
        }
I receive the following Comments. I'm unsure how to alter the CSS to eliminate the comments; please advise:

For: https://fonts.gstatic.com/s/notosans/v6 ... xaG2iE.eot
Expected media type "application/vnd.ms-fontobject", got "font/eot".
For: https://fonts.gstatic.com/s/notosans/v6 ... eot?#iefix
Expected media type "application/vnd.ms-fontobject", got "font/eot".
For: https://fonts.gstatic.com/s/notosans/v6 ... xL-qU.woff
Expected media type "application/font-woff", got "font/woff".
For: https://fonts.gstatic.com/s/notosans/v6 ... iixG1c.ttf
Expected media type "application/font-sfnt", got "font/ttf".
It's unclear what I must alter in the CSS to eliminate the 'expected media type' problems; MDN and W3 are no help; please advise.
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch »

Thanks for reporting this. I've just released an update for the standard edition (v18.0022) that address this issue and recognizes the relatively new "font" media types. It also includes the latest config file so it should resolve the other bug you reported as well.

Please let me know how it works.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

Re: How to resolve font-face issues?

Post by TomHTML »

For all but the 'ttf' font types I listed are now recognized by the validator without raising any issues; the 'ttf' issue remains, and 'woff2' now seems problematic.

For:

Code: Select all

<link rel=preload href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2 as=font type=font/woff2 crossorigin>
The following error message is raised:
Expected media type "font/woff2", got "application/font-woff2"
Also, again in:

Code: Select all

@font-face {
            font-family: Music-Glyphs;
            font-weight: 400;
            font-style: normal;
            src: url(fonts/Music-Glyphs-Roman.eot);
            src: url(fonts/Music-Glyphs-Roman.eot?#iefix&v=4.7.0) format('embedded-opentype'), local('Music-Glyphs'), local('Music-Glyphs'), url(fonts/Music-Glyphs-Roman.woff2) format('woff2'), url(fonts/Music-Glyphs-Roman.woff) format('woff'), url(fonts/Music-Glyphs-Roman.ttf) format('truetype'), url(fonts/Music-Glyphs-Roman.svg#Music-Glyphs-Roman) format('svg')
...the validator complains about

Code: Select all

url(fonts/Music-Glyphs-Roman.woff2)
, with the comment:
Expected media type "font/woff2", got "application/font-woff2"
Also, in the same font-face, for

Code: Select all

url(fonts/Music-Glyphs-Roman.ttf)
, it complains with the comment:
Expected media type "font/ttf" or "application/font-sfnt" but got "application/x-font-ttf"
Many thanks in advance for attending to this!
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch »

It seems that application/font-woff2 is from an old proposal but it's probably a good idea that CSS HTML Validator recognize it anyway for backward compatibility. This will be in the next update.

Similarly, application/x-font-ttf is not official either but perhaps that should be recognized as well.

Note that these aren't really complaints. The messages should be more like helpful comments to help make sure a proper media type is used.

I may also add some comments about deprecated media types like application/font-woff (which was deprecated in favor of font/woff).

This seems to be a good list:
https://www.iana.org/assignments/media- ... ypes.xhtml
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

Re: How to resolve font-face issues?

Post by TomHTML »

Hmm, when I therefore edit the first link--which was indicated with a red square in the validator listing, suggesting the severity of the issue--this way:

Code: Select all

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2" as="font" type="application/font-woff2" crossorigin>
...thus replacing "font/woff2" with "application/font-woff2", then the font won't load, and in the Chrome developer's console it flags the item "has an unsupported 'type' value".

Checking the listing at https://www.iana.org/assignments/media- ... ypes.xhtml, there's application/font-woff but not application/font-woff2 as a recognized type. (Has fontawesome somehow mangled the font type?)

What should I do? The red square is disconcerting...
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch »

Hello,

As far as I can tell, the best fix would be for the server to return the correct content type which is font/woff2. I think any other way around this problem would be a "hack".
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch »

The issues reported here got me to rethink and redo some of the media type/MIME type checking in CSS HTML Validator.

If you can, please download CSS HTML Validator Standard. You should get v18.0023 or above (even though the system does not recognize or show this version yet):
https://www.htmlvalidator.com/download/registered.php

Please let me know how it works if you are able to try it. Thanks!
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
TomHTML
Rank III - Intermediate
Posts: 75
Joined: Sun Feb 04, 2018 10:19 am

Re: How to resolve font-face issues?

Post by TomHTML »

Just installed and checked it, and yes, it works! They're all commented in green at the bottom of the links list. I like the new message as well. Many thanks!
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch »

Great! :D
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply