System Font

Boost website performance by using the system font of a user operating system because the browser doesn’t have to download any font files.

Set of @font-face rules created by Jonathan Neal let us use the native system font of the OS running the browser.


This package can be installed with npm: npm install --save system-font-css.


In Jekyll, importing the SASS partial directly from node_modules directory won’t work so we have to copy the package to _sass directory manually or using npm copy ncp package:

ncp node_modules/system-font-css/ _sass/system-font-css/


Import SCSS partial:

// System system fonts
@import "system-font-css/_system-font";


body {
    font-family: system-ui;
blockquote {
    font: italic 300 system-ui;

System font offers eight variations of the system-ui font family:

  • light (300)
  • light italic
  • normal (400)
  • normal italic
  • medium (500)
  • medium italic
  • bold (700)
  • bold italic