Astro JS - Fonts

---

---

Fonts in Astro

Astro framework has built-in support for using custom fonts or any other open source fonts in your project. In this chapter, we will discuss how to add local fonts, Google Fonts, and Fontsource in Astro.

Add Local Fonts in Astro

To use custom fonts in astro, you can add the font files in the project directory and import them in the Astro component. Follow the steps below to add local fonts in Astro:

Step 1: Add Font Files

Add font files in your public/font directory of project. For example, public/fonts/american-scribe.woff

Step 2: Import the Font

Import the font in your global CSS file using the @font-face rule.

@font-face {
    font-family: 'American Scribe';
    src: url('/fonts/american-scribe.woff') format('woff');
}

Step 3: Use Font in Astro Component

To use the font in your project, you can apply the font-family property to the element. The 'sans-serif' is the fallback font if the custom font is not available.

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

Add Google Fonts in Astro

To use Google Fonts in Astro, you can import the Google Fonts in your global CSS file. Follow the steps below to add Google Fonts in Astro:

Step 1: Select the Font

Go to the Google Fonts website and select the font you want to use. Click on the 'Select this style' button to add the font to the selection.

Step 2: Embed the Font

Click on the 'Embed' tab to get the link to the font. Copy the link and paste it in your global CSS file.

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

Step 3: Use the Font in Astro Component

To use the font in your project, you can apply the font-family property to the element.

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

Using Fontsource

The fontsource is a package that simplifies using Google Fonts and other open-source fonts in your project. It will provide npm modules you can install for the fonts you want to use. Follow the steps below to use fontsource in Astro:

Step 1: Find the Font

Find the font you want to use in Fontsources catalog. This example will use the Roboto font.

Step 2: Install the Fontsource Package

Install the fontsource package using npm. You can install the fontsource package for Roboto using the following command:

npm install @fontsource/roboto

Step 3: Import the Font

Import the font package in the component where you want to use the font. Usually, you will want to do this in a common layout component to make sure the font is available across your site. The import will automatically add the necessary @font-face rules needed to set up the font.

---
import '@fontsource/roboto';
---

Step 4: Use the Font in Astro Component

Use the font in your project by applying the font-family property to the element.

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

Register fonts in Tailwind

If you are using Tailwind in your Astro project, you can use either of the previous methods on this page to install your font, with some modifications. You can either add an @font-face statement for a local font or use Fontsources import strategy to install your font.

• Install and setup the font as described in the previous sections. Skip the final step of adding font-family to your CSS.
• Add the typeface name to src/styles/global.css. The code below, adds Inter to the sans-serif font stack.

/* src/styles/global.css */

@import 'tailwindcss';

@theme {
  --font-sans: 'Inter', 'sans-serif';
}

Now, all sans-serif text (the default with Tailwind) in your project will use your chosen font and the font-sans class will also apply the Inter font.