[Tips] Tailwind CSS, How to add Local font to Tailwind CSS and NextJS

 ✋✋✋Hello everyone, welcome back to Learn Tech Tips Blogspot. I am Zidane (大家好， 我是雞蛋🥚🥚) 

How to add Local font to Tailwind CSS and NextJS

This topic is for NextJS developer, who is working with NextJS and want to fast build UI without write CSS, this topic is for you. On this topic I will use Tailwind css (Slogan: Rapid build modern website without ever leaving your HTML - The slogan is so impressive that I was fascinated and curious when I first met, The Tailwind is very cool and very useful for frontend developer now. Thanks Tailwind) and NextJS for build one page recent search, you will see Tailwind very helpful in build UI. As my idea, Tailwind maybe will become a new trends on the future for web development, because of its convenience and support fast build, I really love it now.

Let's Follow me on

👉 Tiktok

👉 Facebook:

Ok. Let's go though the topic, This topic I will share with you how to add local (download) font in NextJS and Tailwind CSS

Part One: How to add Local font to Tailwind CSS and NextJS

Example: I wanna add Gilroy font in NextJS and Tailwind CSS, 

Step 1: go to fonts page and download it: https://www.cufonfonts.com/font/gilroy-bold#google_vignette

Step 2: This step is very IMPORTANT. Many people got stuck on this step, If you don't do this step you cannot use download local font. It actually take me much time to do it. I don't want you waste time, so I will share this on here. 

Please be note: BEFORE use font (with TTF) remmember convert it to woff2, this ONLY format can use it on NEXTJS and TAILWIND CSS at this point. 

so please go to this website for convert it first. https://www.onlinewebfonts.com/tools

Step 3: copy woff2 font file into public/fonts

Step 4: go to styles/globals.css and put below code here

@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {

@font-face {

font-family: 'Gilroy';

font-style: normal;

font-weight: 300;

src: url('/fonts/Gilroy-Light.woff2') format('woff2');

}

@font-face {

font-family: 'Gilroy';

font-style: bold;

font-weight: 700;

src: url('/fonts/Gilroy-Bold.woff2') format('woff2');

}

}

Step 5: On tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

content: [

'./pages/**/*.{js,ts,jsx,tsx}',

'./components/**/*.{js,ts,jsx,tsx}',

'./app/**/*.{js,ts,jsx,tsx}',

],

theme: {

extend: {

screens: {

'xs': '375px',

'3xl': '1900px'

},

fontFamily: {

gilroy: ['Gilroy'],

},

},

},

plugins: []

}

Step 6: How to use it?

Congratulation, on this step you just simple to put className = "font-gilroy" with any element you want to active font Gilroy

Bouns: if you wanna use Bold, you can add className with: font-bold (font-weight: 700), normally will default use font-weight: 300

<div className="flex ">

<div className="font-gilroy ">Member</div>

<div className="text-white font-gilroy font-bold">Booster </div>

</div>

If you want to add goolge font use Tailwind CSS and NextJS, you can reference on this page

https://learn-tech-tips.blogspot.com/2022/11/how-to-add-google-font-.html

Thanks for reading How to add local font to Tailwind CSS and NextJS. I hope this helps. Feel free to ask back any questions and let us know how it goes, I will keep working with you until it's resolved.

✋✋✋✋ Learn Tech Tips - I am Zidane, See you next time