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

Related Posts


The Ultimate Guide to Choosing and Customizing Hugo Themes

Unleashing the power of Hugo static generator for your website.


Unlock the Potential of Your Hugo Blog

Delve deeper into the world of Hugo blog themes and how to get started fast.