[Tips] How to "add Google font to Tailwind CSS" and NextJS

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

How to add Google 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.

Explore My Other Channel for More Cool and Valuable Insights

👉 Youtube Learn Tech Tips

👉 Tiktok

👉 Facebook:

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

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

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

Step 1: go to google fonts: https://fonts.google.com/specimen/Poppins

Step 2: click import; choose the code
go to styles/globals.css and put into it.

         
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
      

Step 3: go inside tailwind.config.js and put your font here, Here is Poppins

/** @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: {

Poppins: ['Poppins'],

},

},

},

plugins: []

}

Step 4: how to used it? 

just go to styles/style.css and add below code

html {

font-family: Poppins;

font-weight: 300;

}

Don't forgot import "../styles/style.css" into your projects on pages/_app.tsx

import '../styles/globals.css'

import type { AppProps } from 'next/app'

import "../styles/style.css";

function MyApp({ Component, pageProps }: AppProps) {

return <Component {...pageProps} />

}

export default MyApp

 

Thanks for reading How to add google 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