Google Fonts is a free, hosted library of open-source fonts — no download or server setup needed, just a link tag and a CSS rule.
Google Fonts generates a <link> tag for any font and weight selected on their site — add it inside <head>.
<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=Poppins:wght@400;600;700&display=swap" rel="stylesheet">body {
font-family: 'Poppins', sans-serif;
}The generic sans-serif after the font name is used if the Google Fonts file fails to load — a slow connection, an ad blocker, or the service being briefly down. Always include one.
Fonts can also be loaded from inside a CSS file, though the <link> method usually loads faster.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');Don't drop display=swap
The display=swap parameter shows the fallback font immediately and swaps it once the custom font loads — without it, text can stay invisible for a moment while the font downloads.