Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

font-display:swap - Error. But it`s supported almost all browsers #649

Closed
schoolphp opened this issue May 12, 2018 · 12 comments
Closed

font-display:swap - Error. But it`s supported almost all browsers #649

schoolphp opened this issue May 12, 2018 · 12 comments
Labels
CSS

Comments

@schoolphp
Copy link

Message: Property font-display doesn't exist.
font-display have good support: https://caniuse.com/#search=font-display
@sideshowbarker
Copy link
Contributor

Can you please post a short CSS stylesheet snippet here that uses font-display? Either that or a URL for a document online.

I would like to add support for font-display but I want to make sure I end up implementing what you actually need.

@schoolphp
Copy link
Author

https://validator.w3.org/nu/?doc=https%3A%2F%2Fschool-php.com

@aykut-rocks
Copy link

@font-face {
font-family: 'XYZ';
src: url(#) format("woff2"), url(#) format("woff");
font-weight: 900;
font-style: normal;
font-display: fallback;
}

@schoolphp
Copy link
Author

Main problem of it: 100/100 rating by Google and faster load top of page.
I have to include into HTML TOP 1000px css with tag <style>. On the top i using fonts, to correctly i have to use "font-display".
Ofcourse i want to show to my clients, that they have 100/100 without any errors site and without font-blinking. (fonts will blinking without using font-display).

@sideshowbarker
Copy link
Contributor

I understand and agree that support for font-display needs to be added to the checker. It’s a matter of making time to implement that support. I’ll try to get to it this week.

sideshowbarker added a commit that referenced this issue Jun 11, 2018
@sideshowbarker
Drop error messages about CSS font-display
62c4bf2 
This change is a hack to work around the fact the CSS-checking backend
doesn’t yet have support for recognizing the CSS font-display
descriptor. So rather that continuing to emit an error message for it
(which is wrong, because it’s not an error...) this change causes the
checker to filter out (drop/ignore/suppress) error messages about it.

Addresses #649
@sideshowbarker
Copy link
Contributor

I’ve made an interim change to the checker — and pushed it to https://validator.w3.org/nu/ — that causes it to filter out (drop/ignore/suppress) the *Property font-display doesn't exist” messages for now (until I can make time to actually implement proper checker support for font-display).

@ylafon
Copy link

ylafon commented Aug 28, 2018

Fixed in w3c/css-validator@52af757 , 62c4bf2 should be reverted.

@vielhuber
Copy link

Is this already live? I get some errors with font-display:swap (look at https://validator.w3.org/nu/?doc=https%3A%2F%2Fvielhuber.de%2F).

@ylafon
Copy link

ylafon commented Feb 5, 2019

It is, in your case, you have one instance that is not in a @​font-face rule.

@vielhuber
Copy link

You are absolutely right, thanks for clarification.

Now I only get one error left, that scrollbar-color is unknown. May I open a github issue for this or is this intentionally that you only accept styles that are not in working draft anymore (https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color)?

@jaimeiniesta
Copy link
Contributor

font-display is raising CSS: “font-display”: Property “font-display” doesn't exist. issues again, what are the plans for this?

Here's an example that triggers this issue:

<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>

<style>
  body{ font-family:Roboto; font-size:15px; font-display:swap;}
</style>

</head>
<body>
<p></p>
</body>
</html>

It looks like there's good support for it, and documentation in MDN about this property:

Should it still be marked as an issue?

@sideshowbarker
Copy link
Contributor

Here's an example that triggers this issue:

That example isn’t valid, so it’s appropriate for the checker to report an error there.

font-display isn’t a property, right? It’s a descriptor for use with the @font-face at-rule:

https://drafts.csswg.org/css-fonts-4/#font-display-desc

So what would be valid instead is something like this:

@font-face { font-family:Roboto; font-size:15px; font-display:swap; }

The checker won’t report any error for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@jaimeiniesta @sideshowbarker @ylafon @vielhuber @schoolphp @aykut-rocks