https://github.com/csstools/system-font-css

Use the native system font of the OS running the browser
https://github.com/csstools/system-font-css

Last synced: 11 days ago
JSON representation

Use the native system font of the OS running the browser

• Host: GitHub
• URL: https://github.com/csstools/system-font-css
• Owner: csstools
• License: other
• Created: 2015-07-30T05:08:08.000Z (over 9 years ago)
• Default Branch: gh-pages
• Last Pushed: 2019-10-05T20:23:50.000Z (about 5 years ago)
• Last Synced: 2024-04-14T03:59:11.745Z (7 months ago)
• Language: HTML
• Homepage: https://jonathantneal.github.io/system-font-css/
• Size: 11.7 KB
• Stars: 523
• Watchers: 18
• Forks: 35
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# System Font CSS

System Font CSS is set of `@font-face` rules that let you use the native system font of the OS running the browser.

```css

body {

    font-family: system-ui;

}

```

[system-font.css](system-font.css) offers eight variations of the `system-ui` font family; **light** (300) **light italic**, **normal** (400), **normal italic**, **medium** (500), **medium italic**, **bold** (700), and **bold italic**.

```css

blockquote {

    font: italic 300 system-ui;

}

p {

    font: 400 system-ui;

}

```

## Quick Start

### Install

This package can be installed with:

* [npm](https://www.npmjs.com/package/system-font-css): `npm install --save system-font-css`

### Load

When installed with npm, system-font.css will create both a SCSS and LESS partial for easy importing:

```scss

@import 'system-font';

```

## OSX

**OSX** has used three system typefaces. Since **El Capitan** it has used **San Fransisco**. In **Yosemite** it used **Helvetica Neue**. From **Mavericks** back to **Kodiak** it used **Lucida Grande**.

## Windows

**Windows** has used four system typefaces. Since **Vista** it has used **Segoe UI**. In XP, it used **Tahoma**, which oddly enough does not have an italic variation. From **Windows ME** back to **Windows 3.1** it used **Microsoft Sans Serif**. Finally, from **Windows 2.0** back to **Windows 1.0** it used **Fixedsys**. Neither **Microsoft Sans Serif** or **Fixedsys** are included in this set, with apologies.

Also, for those of opposed to joy, remember that **Internet Explorer 8** does not support local `@font-face` rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the `font` declaration.

```css

body {

    font-family: system-ui, "Segoe UI", Tahoma;

}

```

## Android

**Android** has used two system typefaces. Since **Ice Cream Sandwich** it has used **Roboto**. From **Jelly Bean** back to **Cupcake** it used **Droid Sans**, which also lacks an italic variation. Do you suppose OS developers dislike *emphasis*?

## Ubuntu

Ubuntu has always used one system typeface, aptly named **Ubuntu**. That part was easy.

## Native `system-ui` resources

* [CSS Fonts Module Level 4 Editor’s Draft Specification](https://drafts.csswg.org/css-fonts-4/#system-ui-def)

* [Chrome Platform Status](https://www.chromestatus.com/feature/5640395337760768)

* [Can I Use entry](https://caniuse.com/#feat=font-family-system-ui)

* Previous [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family.