How to configure custom font with Tailwind integration.

[hushed badge]

Hi,
In my latest Astro project (https://www.webmoov.be) I'm using the Tailwind Integration.

Now I want to add a custom font to my project. I have defined this custom font in tailwind.config.mjs:

fontFamily: {
tommy: ['Tommy Soft Bold', 'sans-serif'],
tommyfat: ['TommySoftBlack', 'sans-serif'],
body: ['inter-variable', 'sans-serif']    }

but I also need to define an @layer base directive in a .css file:

@layer base {
@font-face { 
font-family: 'TommySoftBlack';
src: url('MADE-Tommy-Soft-Black.otf') format('otf');
font-weight: 900;
font-style: bold;
font-display: swap;
}
}

I need to add this in base.css, but this file is injected automatically in every page, so I don't know how I can add this @layer directive to my project.

Does anyone have experience configuring a custom font in a Astro project using Tailwind?

Thanks for your help,
Anthony

[turbid fiber]

What do you mean by injected automatically into each page?

[hushed badge]

I got this from the Astro Docs:
"By default, the integration imports a basic base.css file on every page of your project."

https://docs.astro.build/en/guides/integrations-guide/tailwind/#applybasestyles

[turbid fiber]

Ah okay

Do you have a global.css file you're using for global styles?

That's where you would want to use the @font-face directive

Additionally I highly recommend astro-font as your font solution

https://www.launchfa.st/features/astro-font

[hushed badge]

I don't have a global.css file. I didn't know you can use a global.css in combination with the Tailwind integration. I will try this out. I will also check the Astro Font library. Thanks for the advice Arknoodle

[turbid fiber]

No problem, feel free to ping me if you have further issues

[rugged wren]

@hushed badge

By any chance you have a github repository? I'm happy to PR.

Thank you @turbid fiber 🤍

Does anyone have experience configuring a custom font in a Astro project using Tailwind?

I have! that's why I created astro-font haha.

[turbid fiber]

No worries, made sure to link launchfast too instead of the npm page 😉

[rugged wren]

haha thanks

[hushed badge]

Hi Rishi, it's a private repository, but I can give you access if you want to. In the meantime I have solved the issue. I followed Arknoodle's advice and created a global.css file where I defined the @font-face directive:

@import 'tailwindcss/base';

@layer base {
  @font-face {
font-family: 'TommySoftBlack';
src:
url('/made-tommy-soft-black.ttf') format('ttf'),
url('/made-tommy-soft-black.woff') format('woff'),
url('/made-tommy-soft-black.woff2') format('woff2');

font-weight: 900;
font-style: bold;
font-display: swap;
}

@font-face {
  font-family: 'TommySoftBold';
    src: url('/MADE-Tommy-Soft-Bold.otf') format('otf');
  font-weight: 700;
font-style: bold;
font-display: swap;
}
}

Then in my tailwind.config.mjs file I added the fonts to my custom theme:

...
fontFamily: {
  tommy: ['TommySoftBold', 'sans-serif'],
  tommyfat: ['TommySoftBlack', 'sans-serif'],
  body: ['inter-variable', 'sans-serif']        }
...

greetings,

[rugged wren]

Sure here's my github: rishi-raj-jain