How to use Google Fonts in astro?

In this guide, we will learn how to use Google Fonts in your astro website.

First and foremost, to follow along, you must have a working astro project running locally on your computer.

To use Google Fonts, we’re going to use a service called Fontsource. Fontsource provides npm packages for the fonts that you want to use. It includes most of the Google Fonts and other open-source fonts.

Now let’s visit the fontsource.org website, if you already like a font that you’d like to use in your project, search that font the website’s catalog or you can explore and find a font that you like. For demonstration, we will use the Ubuntu font on this article.

After you’ve chosen a font from the catalog, click on the font, it will take you to that specific fonts’ page. On the fonts’ page, it will show you how the font looks in different font weights, also you can experiment with different font sizes, colors, line heights and letter spacings.

On the font’s page, click on the Install tab above on the right side of the font name, copy the installation command. For example, it looks like npm install @fontsource/ubuntu. Paste and run it in your terminal on your project directory. It will install the static version of the font on your node_modules directory.

After installation, you can import the font in the frontmatter of any of your astro component or better yet, if you have a base layout, import it there so the font is available across your project:

---
import '@fontsource/ubuntu';
---

Note: When you import the font like above, it’ll only include the 400 font weight. If you’d like to use another font weight (say 300) or multiple font weights (300, 400 and 700), you have to explicitly mention it in the frontmatter of your astro component like this:

---
import '@fontsource/ubuntu/300.css';
import '@fontsource/ubuntu/400.css';
import '@fontsource/ubuntu/700.css';
---

Now you can use the font by including it in your CSS file or your astro components’ <style> tag.

body {
  font-family: "Ubuntu", sans-serif;
}

h1 {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700; /* you must import the 700 font weight 
  in your astro component */
}

If you don’t like to run npm install every time you want to use a new font, there is also another similar method but this method dosen’t require npm installing.

Using CDN

Instead of installing the fonts via npm install, we will use a CDN.

Open the fontsource website, go to your chosen fonts’ page and click on the CDN tab above on the far right of menu.

Here you can also chose your preferred font weights. At the bottom of the page, you will see that fonts’ @font-face code, copy those lines and paste it on your CSS file.

/* ubuntu-latin-400-normal */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/ubuntu@latest/latin-400-normal.woff2)
      format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/ubuntu@latest/latin-400-normal.woff)
      format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Now, like the previous method, you can use this font by including it your CSS file:

p {
  font-family: "Ubuntu", sans-serif;
}

If you include multiple fontfaces in your css file, sometimes it can look cumbersome. A simple way to make your CSS file clutter-free is to create another css file (let’s call it fonts.css) and dump all your @font-face codes in that file. Now you can import the fonts.css file on your main css file (for ex. globals.css) or any of your astro components.