andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
11eff23e47b0cf8b0af706090127ebf3685ace3f
30-seconds-of-code/snippets/system-font-stack.md
atomiks 11eff23e47 Autoscoping (#103) 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
2018-10-05 09:18:51 +10:00

1.2 KiB
Raw Blame History

System font stack

Uses the native font of the operating system to get close to a native app feel.

HTML

<p class="system-font-stack">This text uses the system font.</p>

CSS

.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Demo

Explanation

The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).

  1. -apple-system is San Francisco, used on iOS and macOS (not Chrome however)
  2. BlinkMacSystemFont is San Francisco, used on macOS Chrome
  3. Segoe UI is used on Windows 10
  4. Roboto is used on Android
  5. Oxygen-Sans is used on GNU+Linux
  6. Ubuntu is used on Linux
  7. "Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has a space)
  8. Arial is a font widely supported by all operating systems
  9. sans-serif is the fallback sans-serif font if none of the other fonts are supported

Browser support

✅ No caveats.