System Font Stack

One of the ways I have boosted performance on my website is by using system fonts. The browser is not downloading in font files. Instead, my site is leveraging the default system fonts already installed on most devices.

Font Family

I applied the system fonts by directly calling them on an element using the font-family property.

What the font!

One of my favorite fonts is San Francisco by Apple. However, you’re not allowed to use it as a Webfont. Their terms of use only allow you to use their fonts when creating apps on their platforms. Fortunately, it’s the default font. It beautifully displays on my iOS devices. Some of the other fonts are relative to windows and android, which are in their own rights quite beautiful too.

What’s my stack?

font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;

This sits in the :root of my css file

Performance over pretty

In conclusion, while I still love a uniquely beautifully crafted site. I choose performance over pretty fonts bespoke to me. These system fonts are absolutely fit for their purpose. Therefore, if this increases page load times and looks good on the glass, then it makes more sense to me.