How to use System fonts in Figma, Webflow and Code?
Here a journey through the use of system fonts with different tools such a design environment (Figma), a web builder (webflow) or just with code.
“Everything you load on the page has a cost. This cost is especially important for mobile devices, because every byte required on a mobile device affects the load time and the amount of bandwidth consumed by the user. The font must be loaded before the content is rendered, so you need to wait in order to complete the resource loading before the user can even read the single word you wrote. But web fonts are a way to provide great user experience through good typography.
The operating system has excellent default fonts. System fonts have the following advantages: speed and performance. They reduce the size of your web pages. But the side effect is that they make your website look very familiar for anyone watching it, because they are used to seeing the same fonts every day on a computer or mobile device. In reality Native fonts.
This is the system font, guaranteed to look great.” (Taken from an article on CSS system fonts)
There is a CSS system fonts cheatsheet, and if we take a look at CanIUse they have a great acceptance:
