Skip to content

Instantly share code, notes, and snippets.

@barbietunnie

barbietunnie/custom-fonts-taliwindcss-nextjs.md

Last active April 17, 2024 19:40
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save barbietunnie/33f44c11422d7e038ef965635c82b19b to your computer and use it in GitHub Desktop.
Save barbietunnie/33f44c11422d7e038ef965635c82b19b to your computer and use it in GitHub Desktop.
Download ZIP
How to Use Custom Fonts in TailwindCSS + NextJS
Raw
custom-fonts-taliwindcss-nextjs.md

How to Use Custom Fonts in TailwindCSS + NextJS

Assuming your have already set up your NextJS + Tailwind project,

1. Select your desired custom Google font

2. Scroll to the bottom and select all the styles you are interested in

Select all your desired styles

3. Copy the text within the <style> tag and paste it in your globals.css file

Import Font CSS

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Add a new property within the fontFamily property in tailwind.config.js under theme > extend, using the CSS rules above.

(Ensure that unquoted values are quoted, otherwise Tailwind might mistake them for a variable)

Copy Font Family

theme: {
  extend: {
    fontFamily: {
     PlayfairDisplay: ['Playfair Display', 'serif'],
    },
  },
},

If you will like to use the deafult Tailwind font styles as a fallback, you can include the existing theme font (Optional):

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        PlayfairDisplay: ['Playfair Display', ...defaultTheme.fontFamily.sans]
      }
    }
  },
}

5. Use the font

You can now use reference the style using the class name font-<Defined-Font-Name>.

For example,

<h1 className="font-PlayfairDisplay text-5xl">This is using a custom font</h1>
@NathanYukai
Copy link

Hey thanks this is great, but you missed the font- in the example.

@barbietunnie
Copy link
Author

Hey thanks this is great, but you missed the font- in the example.

Great catch, updated. Thanks.

@VegetableDev0701
Copy link

How to import local font file ?

@AbdullahAbid87
Copy link

How to import local font file ?

like this:

@font-face {
  font-family: "Blender-Thin";
  src: url("./fonts/Blender-Thin.woff2") format("woff2"),
    url("./fonts/Blender-Thin.woff") format("woff");
}

@bhkangw
Copy link

bhkangw commented Feb 22, 2024 •
edited

Clear and concise, very nice. Would also be helpful to show how to use downloaded fonts not available on Google Fonts :)

@VegetableDev0701
Copy link

thanks, thats all was great help

@triggerfx
Copy link

What about font-weight? how does it work?

@VegetableDev0701
Copy link

❤️‍🔥 ❤️

@jacobozj
Copy link

jacobozj commented Apr 8, 2024

what if i want that to be my default font in all my project? not just by typing "font-PlayfairDisplay"

@barbietunnie
Copy link
Author

what if i want that to be my default font in all my project? not just by typing "font-PlayfairDisplay"

You can do this by setting the class name of the font on the body tag in your root layout, after having initialised the font.

Playfair initialization

export const playfair = Playfair_Display({
  display: 'swap',
  variable: '--font-playfair',
  weight: ['400', '500', '600'],
})

Root layout definition

...
<body className={playfair.className}>
...
</body>

Alternatively, you can go simple and use the Google embed code to add the required links and class name provided in your project.

google embed code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment