css-system-font-stack.md

   1 ---
   2 title: "CSS system fonts"
   3 category: CSS
   4 layout: 2017/sheet
   5 weight: -3
   6 tags: [Featurable]
   7 ---
   8
   9 ### System fonts
  10
  11 ```css
  12 font-family: -apple-system, BlinkMacSystemFont,
  13     "Segoe UI", "Roboto", "Oxygen",
  14     "Ubuntu", "Cantarell", "Fira Sans",
  15     "Droid Sans", "Helvetica Neue", sans-serif;
  16 ```
  17
  18 This uses whatever system font is available. See: [System shock - Designing Medium](https://medium.design/system-shock-6b1dc6d6596f?gi=90078e194544) _(medium.com)_
  19
  20 ### Explanation
  21
  22 | Font                 | OS                      |
  23 | ----                 | --                      |
  24 | `-apple-system`      | OS X (10.11+), iOS (9+) |
  25 | `BlinkMacSystemFont` | OS X, Chrome            |
  26 | `Segoe UI`           | Windows                 |
  27 | `Roboto`             | Android 4.0+            |
  28 | `Oxygen`             | Linux, KDE              |
  29 | `Ubuntu`             | Linux, Ubuntu           |
  30 | `Cantarell`          | Linux, GNOME            |
  31 | `Fira Sans`          | Firefox OS              |
  32 | `Droid Sans`         | Android (until 3.2)     |
  33 | `Helvetica Neue`     | OS X (10.9)             |