Need help with system-font-css?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jonathantneal
498 Stars 34 Forks Other 17 Commits 8 Opened issues

Description

Use the native system font of the OS running the browser

Services available

!
?

Need anything else?

Contributors list

# 5,094
JavaScr...
CSS
rwd
elevent...
5 commits
# 103,778
respons...
HTML
lazyloa...
CSS
3 commits
# 8,904
CSS
npm
HTML
jQuery
2 commits
# 519,902
HTML
CSS
1 commit
# 264,811
markup-...
respons...
HTML
CSS
1 commit
# 7,885
Zsh
Perl
tpm
powerli...
1 commit
# 525,452
HTML
CSS
1 commit
# 354,043
HTML
pivot-t...
CSS
Angular
1 commit

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.
body {
    font-family: system-ui;
}

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.
blockquote {
    font: italic 300 system-ui;
}

p { font: 400 system-ui; }

Quick Start

Install

This package can be installed with:

  • npm:
    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:

@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.
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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.