I was following the fontsource guide to install custom font, i notice in astro doc it says fontsource, but in the fontsource document it also has fontsource-variable, does it matter if i use the variable one? I tried using it with tailwind but couldn’t get it to work so im not sure if thats why.
#custom font via fontsource issue
amber junco
pallid quail
Hello 👋 If there is a variable option I recommend using it. A variable font will always support font weights between 100-900 but static fonts only support specific weights (different for every font). Static fonts can be useful if you want to reduce the size of your bundle and only ship font weights that you know will be on your website although most of the time this is unnecessary.
How are you using this with Tailwind?
amber junco
i first installed the font via fontsouce like this:
npm install @fontsource-variable/montserrat
npm install @fontsource-variable/eb-garamond
in my Layout.astro i imported them like this
interface Props {
title: string;
}
const { title } = Astro.props;
import Header from "../components/Header.astro";
import "@fontsource-variable/montserrat";
import "@fontsource-variable/eb-garamond";
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot name="header">
<Header />
</slot>
<main>
<slot name="abc" />
</main>
</body>
</html>
and in my tailwind.config.mjs
i import defaultTheme
import defaultTheme from 'tailwindcss/defaultTheme'
/** @type {import('tailwindcss').Config} /
export default {
content: ['./src/**/.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
fontFamily: {
montserrat: ["Montserrat", ...defaultTheme.fontFamily.sans],
sans: ["Montserrat", ...defaultTheme.fontFamily.sans],
serif: ["eb-garamond", ...defaultTheme.fontFamily.serif],
},
},
},
plugins: [],
}
and finally, in Header.astro, i use the font-Montserrat
<div class="whitespace-wrap font-Montserrat text-white font-bold tracking-header mr-auto">
Hello
</div>
I tried lowercase font-montserrat but it also doesn't work
when i inspect the text, the font-family is Montserrat, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
but i don't see Montserrat being applied..
pallid quail
i first installed the font via fontsouce like this:
npm install @fontsource-vari...
The variable font name is Montserrat Variable
amber junco
OHHHHH! so my tailwind config will be montserrat: ["Montserrat Variable", ...defaultTheme.fontFamily.sans],
and in my astro file ill keep font-montserrat right?
pallid quail
Yes
amber junco
thank you so much you saved my day!