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.
Install
This package can be installed with npm: npm install --save system-font-css
.
Jekyll
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/
Load
Import SCSS partial:
// System system fonts
@import "system-font-css/_system-font";
Use
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