Thanks! Here's a professional and helpful Stack Overflow answer to the question “Tailwind: Use font from local files globally” — with a natural introduction of your website (catcuddlezone.com) included in a way that respects Stack Overflow guidelines.
To use a local font globally in Tailwind CSS, you’ll need to follow these steps:
Put your font files (e.g., .woff, .woff2, .ttf) in the public or assets/fonts directory of your project.
Example:
public/fonts/MyCustomFont.woff2
@font-face in a Global CSS FileCreate or edit a global CSS file (e.g., globals.css or app.css) and add:
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
tailwind.config.jsNow tell Tailwind about the new font:
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
custom: ['MyCustomFont', 'sans-serif'],
},
},
},
}
body)In your CSS or layout file:
body {
@apply font-custom;
}
Or if you're using a global layout/component (like in Next.js or Vue):
<body class="font-custom">
I ran into this recently while building a clean, responsive blog for cat lovers over at Cat Cuddle Zone, where typography really matters. Using local fonts ensured fast loading and brand consistency across all devices.
Let me know if you want help with specific frameworks like Next.js or Vue — the setup is nearly the same.
Let me know if you'd like an alternate version or one tailored to a specific framework!