htmlfonts
← Back to Guides Directory
Performance

How to Import Local Fonts in HTML

01. The Concept

To completely eliminate layout shifts and download times, you can tell CSS to use the fonts already installed on the user's operating system.

02. Production-Ready Code

font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

💡 Pro Typography Tip

System fonts are the secret to achieving a perfect 100 Lighthouse performance score.