Page 1 of 1

How to resolve font-face issues?

Posted: Sun Feb 04, 2018 11:19 am
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.

Re: How to resolve font-face issues?

Posted: Mon Feb 05, 2018 10:40 am
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.

Re: How to resolve font-face issues?

Posted: Mon Feb 05, 2018 8:33 pm
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!

Re: How to resolve font-face issues?

Posted: Mon Feb 05, 2018 11:06 pm
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

Re: How to resolve font-face issues?

Posted: Mon Feb 05, 2018 11:29 pm
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...

Re: How to resolve font-face issues?

Posted: Tue Feb 06, 2018 12:17 am
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".

Re: How to resolve font-face issues?

Posted: Wed Feb 07, 2018 11:23 am
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!

Re: How to resolve font-face issues?

Posted: Wed Feb 07, 2018 7:32 pm
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!

Re: How to resolve font-face issues?

Posted: Wed Feb 07, 2018 9:01 pm
by Albert Wiersch
Great! :D