Adding Custom Fonts in Next.js 13 with Tailwind CSS
Before we dive into the process of adding custom fonts, make sure you have the following prerequisites in place:
Next.js 13 Project: Ensure you have a Next.js 13 project set up and ready for customization.
Custom Font Files: Obtain the .woff, .woff2, or .ttf font files that you want to use. Make sure you have the appropriate licensing for the fonts.
Okk so let's go!!Step 1: Organize Your Fonts
Create a folder within yourpublic
directory. Naming it 'fonts' is a common convention
|-- app/
|-- styles/
|-- public/fonts/ <-- Place your custom font files here
|-- ...
- Step 2: Import Fonts in your CSS file (Note: we will setup in our global.css file but you can setup with other css file with same process)
In your project's 'app' directory, open
global.css
file and define the @font-face rule to import your custom fonts:
//app/globals.css
@font-face {
font-family: 'limelight';
font-style: regular;
font-weight: 400;
src: url('/fonts/Limelight-Regular.ttf') format('truetype'); // mention format of your font
}
- Step 3: Open
tailwind.config.ts/js
file and configure you custom font-family.
// tailwind.config.ts
module.exports = {
// ...other configuration...
extend: {
fontFamily: {
limelight: ['limelight', 'sans-serif'],
},
},
}
And that's it can you your limelight
font-family in anywhere in your project.
i.e
import React from 'react';
const index: React.FC = () => {
return (
<p className="font-limelight text-2xl">Thanks for Reading</p>
);
};
export default index;
That's it all configurations are done for setting up the custom fonts in Next.js projects in optimize way.
Thanks for reading buddy see you soon!!
Happy coding! ๐โจ
Top comments (1)
what if there are more than 1 font or more than 1 weights that we need to use in that case how do we proceed?