[Bug] Incorrect URL Syntax in @font-face Declarations

[Vanessa082]

Description

Incorrect URL syntax in @font-face declaration. The url() value is not enclosed in quotes, which may lead to unexpected behavior in certain browsers.

Reproduction

1. Open the CSS library-vars.css file containing the @font-face declarations.
2. Locate the @font-face rules for fonts such as "Source Sans Pro" and "Roboto Condensed."
3. Observe that some url() values are not enclosed in quotes.
4. See error.

Expectation

The URL () value should be enclosed in quotes to ensure consistent behavior across all browsers.

Screenshots

Environment

• Device: Laptop
• OS: Linux
• Browser: Chrome

Resolution

• I would be interested in resolving this bug.

[possumbilities]

HI @Vanessa082 and thanks for this!

I'm not sure that adding the quotes is required at this time:

Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. --(https://developer.mozilla.org/en-US/docs/Web/CSS/url_function)

Could you specific which browsers would encounter an issue here?

[Vanessa082]

Hi @possumbilities

Thank you for your feedback regarding the use of quotes in the URL () values within the @font-face declarations. I appreciate your reference to the MDN documentation; it provides valuable context on when quotes are required.

While it's true that many modern browsers can handle unquoted URLs without issues, I believe adopting a consistent practice of enclosing all URLs in quotes can enhance clarity and maintainability in our CSS. I suggest we go for one

In light of this, I recommend we adopt a policy of consistency, using quotes consistently to help maintain clarity and readability in your CSS. This also avoids any potential confusion about where the URL begins and ends, especially for other developers reading your code.

Thank you for considering this suggestion, and I'm looking forward to any further thoughts you might have!