Add new font families to your Astro project

Search a font

You can find fonts on sites like Google Fonts, once you find it, you can download it. After that unzip the fonts if necessary and place them in the public folder of your project: project-folder/public

Steps to add custom fonts

1. Download the font and place it in your folder project.
2. Create a .css for that file.
3. Add a font name to the tailwindcss file.
4. Call the css file into your main css file.

Creating the CSS file

Here’s an example of how to create a CSS file for your custom font:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Adding to Tailwind CSS

To use your custom font with Tailwind CSS, add it to your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'custom': ['MyCustomFont', 'sans-serif'],
      },
    },
  },
}