How to use Google Fonts on a website

Option 1: link tag (fastest to set up)

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

Then: font-family: 'Inter', sans-serif;

Option 2: @import in CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

Performance tips

• Load only the weights you use (each adds a file).
• Keep display=swap so text shows immediately.
• Use variable fonts when you need many weights.
• Consider self-hosting (download the files and serve them from your own domain) for speed and to avoid third-party requests: some EU organizations self-host for privacy compliance.

Using fonts in other tools

• WordPress: many themes let you pick Google Fonts in the Customizer; otherwise add the link tag via your theme or a header plugin.
• Shopify: the theme editor’s typography settings include a large font library; custom fonts need theme code.
• Webflow, Squarespace, Wix: Google Fonts are built into the font pickers.

Fallback fonts

Always end a font stack with a generic family (font-family: 'Inter', system-ui, sans-serif;) so text still renders if the web font fails to load.