Why are some of theese font-families colored differently than others?

Why are some of the font-families here different colors than the others?

Also, are “system” and “BlinkMacSystemFont” fonts?

Lastly, what role is “-apple-” playing here?

Thank you!

This is your editor theme.

The code above is saying:

  1. Use -apple-system (the default MacOS font). If this doesn’t exist, then:
  2. Use BlinkMacSystemFont (the default MacOS fonts on older versions of MacOS). If this doesn’t exist, then:
  3. Use Segoe UI. If this doesn’t exist … so on.
  4. Use any sans-serif font available on the persons machine.

If the font has a space inside it, it must be wrapped in quotes (which is why your editor is colouring them differently)

2 Likes

Thank you! But then why is Roboto also colored?

Just a matter of semantics and presentation I believe. It would work without the quotes, the same with the Arial font. Here’s a good guide on font-family: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family.

PS: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Valid_family_names says that Gill Sans Extrabold, sans-serif; is valid. While this is true, it may cause breakage in some older browsers which is why it’s always always good practice to wrap fonts you know are actual fonts and not fallback mechanisms (like sans-serif) in quotes.

1 Like

I imported the same font family you had into my IDE and I got the following:


This is a case of the theme you are using on your IDE that is choosing to represent the fonts in those colours.

Some information for you:

  • -apple-system targets San Francisco in Safari (on Mac OS X and iOS), and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
  • system-ui represents the default UI font on a given platform.
  • BlinkMacSystemFont is the equivalent for Chrome on Mac OS X.
  • Segoe UI targets Windows and Windows Phone.
  • Roboto targets Android and newer Chrome OS. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead.

Source

Chrome and Safari have recently shipped “system-ui” which is a generic font family that can be used in place of “-apple-system” and “BlinkMacSystemFont”.

Source

2 Likes