Google Fonts

Google Fonts is a free, open-source library of web fonts. It's the easiest way to add custom fonts to websites without managing font files. Simple import and use.

How to Use Google Fonts

HTML

<!-- 1. Add link tag to <head> -->
<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=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

<!-- 2. Use in CSS -->
<style>
  body {
    font-family: 'Roboto', sans-serif;
  }
</style>

Common Google Fonts

Font	Type	Use Case
Roboto	Sans-serif	Modern, versatile
Open Sans	Sans-serif	Readable, friendly
Lato	Sans-serif	Elegant, clean
Merriweather	Serif	Reading, traditional
Montserrat	Sans-serif	Bold, modern

CSS

/* Using multiple Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lato:ital@0;1&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

em {
  font-family: 'Lato', sans-serif;
  font-style: italic;
}

Performance Tips

HTML

<!-- 1. Use preconnect for faster loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 2. Specify weights you need -->
<!-- Don't load all weights if not needed -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<!-- 3. Use font-display=swap for better UX -->
<!-- Text shows with fallback while font loads -->

<!-- 4. Load fonts asynchronously if possible -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

Note

Google Fonts is free and easy. Just link and use. Load only weights you need. Use font-display: swap for better performance.

Font shorthand: [font shorthand & system fonts](/css/font-shorthand).