How to Add Google Fonts to HTML

01. The Concept

Embedding external fonts requires a link tag in your document head. To ensure your page doesn't suffer from layout shifts, always include display=swap.

02. Production-Ready Code

<link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap' rel='stylesheet'>

💡 Pro Typography Tip

Preconnect to the Google Fonts server to shave 100ms off your load time.