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…