How to add font ttf file in nextjs #16257
Replies: 2 comments 1 reply
|
You can reference files in the @font-face {
font-family: "Avenir";
src: url("/fonts/AvenirNextRoundedStd-Demi.ttf");
src: url("/fonts/AvenirNextRoundedStd-MedIt.ttf");
src: url("/fonts/AvenirNextRoundedStd-Reg.ttf");
}Also you should consider removing |
|
To ensure that the correct font styles are applied when different weights or styles are specified in your CSS, it's important to define each variant of the "Avenir" font family with its own @font-face rule. This includes specifying distinct font-weight and font-style properties where applicable. Here is an example of how you can configure this for the "Avenir" font: @font-face {
font-family: "Avenir";
src: url("/fonts/AvenirNextRoundedStd-Demi.ttf");
font-weight: 600; /* Demi is generally considered as semi-bold or demi-bold */
}
@font-face {
font-family: "Avenir";
src: url("/fonts/AvenirNextRoundedStd-MedIt.ttf");
font-weight: 500; /* Medium Italic - slightly bolder than normal */
font-style: italic; /* Specifies that this font style is italic */
}
@font-face {
font-family: "Avenir";
src: url("/fonts/AvenirNextRoundedStd-Reg.ttf");
font-weight: normal; /* Regular weight, typically 400 */
} |
|
You can also use // fonts/index.ts
// fonts/myFont.ttf
import localFont from "next/font/local";
export const myFont = localFont({
src: "myFont.ttf",
display: "swap",
variable: "--font-my-font",
});// app/layout.tsx
import "./globals.css";
import { myFont } from "@/fonts";
export default function RootLayout({
/* ... */
}) {
return (
<html lang="en">
<body className={`${venite.variable}`}>
{/* ... */}
</body>
</html>
);
}/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
.my-font {
font-family: var(--font-my-font);
@apply tracking-wide;
}
}
|
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
I am new to Nextjs. I wanna add my custom fonts to my project. I am totally confused about how to do that(my fonts are in "public/fonts/"). my global.css file is this-
//global.css
`html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
box-sizing: border-box;
}
@font-face {
font-family: "Avenir";
src: url("../public/fonts/AvenirNextRoundedStd-Demi.ttf");
src: url("../public/fonts/AvenirNextRoundedStd-MedIt.ttf");
src: url("../public/fonts/AvenirNextRoundedStd-Reg.ttf");
}`
//next.config.js
const withCSS = require("@zeit/next-css"); module.exports = withCSS({ /* config options here */ });All reactions