How to resolve font-face issues?

For technical support for all editions of CSS HTML Validator. Includes bug reports.
Post Reply
TomHTML
Rank II - Novice
Rank II - Novice
Posts: 28
Joined: Sun Feb 04, 2018 10:19 am

How to resolve font-face issues?

Post by TomHTML » Sun Feb 04, 2018 11:19 am

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
Site Admin
Posts: 3363
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch » Mon Feb 05, 2018 10:40 am

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.
Image
Albert Wiersch

TomHTML
Rank II - Novice
Rank II - Novice
Posts: 28
Joined: Sun Feb 04, 2018 10:19 am

Re: How to resolve font-face issues?

Post by TomHTML » Mon Feb 05, 2018 8:33 pm

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
Site Admin
Posts: 3363
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch » Mon Feb 05, 2018 11:06 pm

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
Image
Albert Wiersch

TomHTML
Rank II - Novice
Rank II - Novice
Posts: 28
Joined: Sun Feb 04, 2018 10:19 am

Re: How to resolve font-face issues?

Post by TomHTML » Mon Feb 05, 2018 11:29 pm

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
Site Admin
Posts: 3363
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch » Tue Feb 06, 2018 12:17 am

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".
Image
Albert Wiersch

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3363
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch » Wed Feb 07, 2018 11:23 am

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!
Image
Albert Wiersch

TomHTML
Rank II - Novice
Rank II - Novice
Posts: 28
Joined: Sun Feb 04, 2018 10:19 am

Re: How to resolve font-face issues?

Post by TomHTML » Wed Feb 07, 2018 7:32 pm

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
Site Admin
Posts: 3363
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: How to resolve font-face issues?

Post by Albert Wiersch » Wed Feb 07, 2018 9:01 pm

Great! :D
Image
Albert Wiersch

Post Reply