33 lines
1.0 KiB
Markdown
33 lines
1.0 KiB
Markdown
---
|
|
title: "CSS system fonts"
|
|
category: CSS
|
|
weight: -3
|
|
tags: [Featurable]
|
|
---
|
|
|
|
### System fonts
|
|
|
|
```css
|
|
font-family: -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", "Roboto", "Oxygen",
|
|
"Ubuntu", "Cantarell", "Fira Sans",
|
|
"Droid Sans", "Helvetica Neue", sans-serif;
|
|
```
|
|
|
|
This uses whatever system font is available. See: [System shock - Designing Medium](https://medium.design/system-shock-6b1dc6d6596f?gi=90078e194544) _(medium.com)_
|
|
|
|
### Explanation
|
|
|
|
| Font | OS |
|
|
| ---- | -- |
|
|
| `-apple-system` | OS X (10.11+), iOS (9+) |
|
|
| `BlinkMacSystemFont` | OS X, Chrome |
|
|
| `Segoe UI` | Windows |
|
|
| `Roboto` | Android 4.0+ |
|
|
| `Oxygen` | Linux, KDE |
|
|
| `Ubuntu` | Linux, Ubuntu |
|
|
| `Cantarell` | Linux, GNOME |
|
|
| `Fira Sans` | Firefox OS |
|
|
| `Droid Sans` | Android (until 3.2) |
|
|
| `Helvetica Neue` | OS X (10.9) |
|