Prev Next

CSS Google Fonts

Google Fonts is a popular online library of free, open-source fonts. By linking to a Google Fonts stylesheet, you can easily use unique typography to enhance your site’s aesthetics. This expands your design options beyond system defaults.

Key Topics

Linking Google Fonts

Visit Google Fonts, select a font, and copy the <link> tag into your <head>. Then use font-family as normal.

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>
</head>

Explanation: The Roboto font is loaded from Google’s servers. If Roboto fails, the browser falls back to sans-serif.

Performance Considerations

Loading external fonts adds HTTP requests. Use the display=swap parameter for a better user experience, and limit the number of fonts and weights to maintain performance.

Key Takeaways

  • Variety: Access a wide range of fonts for unique designs.
  • Ease: Simple linking process to integrate custom fonts.
  • Balance: Use carefully to avoid performance slowdowns.
Prev Next