0

I am looking at the CSS code behind a page where they have the roboto font is quoted. Like this:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

As far as I know, non-generic family names don't need to be quoted. So I kinda don't get why they didn't quote arial but they did roboto. Would it still work if they didn't quote roboto? Like this:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

Thanks.

blurfus
  • 13,485
  • 8
  • 55
  • 61
abraham castro
  • 1
  • You can quote Roboto or Arial as you want and also you can use it without quotes. But for separate word fonts, like 'Segoe UI' you need quotes. [https://stackoverflow.com/questions/13751412/why-would-font-names-need-quotes](https://stackoverflow.com/questions/13751412/why-would-font-names-need-quotes) – fatm Jan 05 '22 at 06:17

1 Answers1

0

There's no rule saying that you need to quote font names. It need not even be for font names such as Jetbrains Mono, you can just enter it without any quotes. But convention dictates that we use quotes for all font names if the contain numbers, whitespace characters or other punctuations other than a hyphen, because if you haven't included quotes in the aforementioned cases, the CSS font selection mechanism only tries to determine the closest possible font, but need not be the right one.

But generally, you are allowed to not use quotes as long as the font name contains letters, digits, hyphens, single inner spaces, and hex character codes (e.g. \20AC).

But you aren't allowed to start an unquoted font name with a digit.

Double quotes and single quotes mean the same and have no difference based on functionality.

Robo
  • 660
  • 5
  • 22