We’re big fans of Astro and TailwindCSS here at Protypo. They allow us to prototype and build projects so quickly. We alo like to use custom fonts in our projects for specific copy whether its a header or call to action, a custom font can make a website so much more pleasing on the eyes.

Downloading the font

Setting up a custom font in an Astro project and using it with TailwindCSS is pretty straightforward. So let’s start by selecting a custom font. We’re going to use Cal Sans which is the font created and used by Cal.com. It’s great for that big bold header you have on your landing page or for attacting attention to a specific area of the page. Download the font and decompress the zip file.

Adding to Astro

I’m not going to run you through setting up an Astro project in this tutorial. So I’m going to assume you already have on setup.

1. In your Astro project let’s create a fonts directory inside of the public directory: mkdir public/fonts
2. Copy the downloaded font file from the cal-sans/fonts/webfonts directory to public/fonts in your Astro project
3. In the src directory of your Astro project, create a directory called assets: mkdir src/assets
4. In the assets directory create a new CSS file called fonts.css: touch fonts.css

Now we’re going to add our font to the newly created font.css.

/* CalSans font */
@font-face {
    font-family: 'CalSan';
    src: url('/fonts/CalSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

We’ve opted to go for the woff2 file format here. Which is the most modern file format and not supported by every browser but for the case of this tutorial it is fine.

We have one step left before we setup our font with Tailwind. We need to import our CSS file into our HTML file(s). In our index.astro we will add the following:

---
import '../assets/fonts.css';
---

The Final Setup

Now we have created the CSS and imported it we just need to setup our font to be used with TailwindCSS. If you haven’t setup Tailwind in your Astro project you can do so by running npx astro add tailwind in your terminal and entering y to all the following questions. We can do that by adding thefollowing to our tailwind.config.cjs inside of the theme object:

fontFamily: {
    cal: ['CalSan', 'sans-serif']
}

That’s it! Now we can use the font-cal class in our components and templates. I hope this allows you to build amazing projects.