Custom font? #4143
Unanswered
szelonkaMS
asked this question in
Q&A
Custom font?
#4143
Replies: 1 comment 1 reply
-
|
You need to install a font Geist npm, even I believe you can install any font. import { GeistSans } from 'geist/font/sans'; <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
<body>{children}</body>
</html>or you can use google fonts also one more thing you need to extend the theme in the tailwing.config.js module.exports = {
...
theme: {
extend: {
fontFamily: {
sans: ['var(--font-geist-sans)'],
mono: ['var(--font-geist-mono)'],
roboto: "Roboto", sans-serif;
},
},
...
},
}Then you can add classes like |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
It was simpler than that. Just define a font to the body element and it's inherited by all components. globals.css @tailwind base;
@tailwind components;
@tailwind utilities;
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@layer base {
@font-face {
font-family: "Poppins";
src: url("./assets/fonts/Poppins/Poppins-Regular.ttf");
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("./assets/fonts/Poppins/Poppins-Bold.ttf");
font-weight: 700;
font-display: swap;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground font-poppins;
}
}tailwind.config.ts import type { Config } from "tailwindcss";
const config = {
...,
extend: {
fontFamily: {
poppins: ["Poppins", "sans-serif"],
},
...,
plugins: [require("tailwindcss-animate")],
} satisfies Config;
export default config; |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm starting a new Design System using shadcn-ui but following the current brand guidelines and I have to change default font to use Poppins
I couldn't find any documentation to do this. It is possible?
Any help is welcome. Thanks!
Beta Was this translation helpful? Give feedback.
All reactions