Need help installing font in react app and tailwind css

[dennis777]

Hello, this is not really an issue and more of a support thing

I'm fairly new to web development I was just wondering how to get this font up and running in my vite react project with tailwind css. I tried to follow the guide but I can't get it to work, it just makes my entire webpage blank when rendering.

When I try to apply the font like <h2 className={GeistSans.className}>Hello</h2> I get an error in my console

TypeError: (0, import_local.default) is not a function. 

I downloaded the .ttf file and managed to get some form of the font to show up by putting this in my index.css file

@font-face {
  font-family: "Geist";
  src: url(./fonts/GeistVariableVF.ttf) format('truetype');
}

and then the following config in my tailwind.config.json

//...
theme: {
    extend: {
        fontFamily: {
            "giest": ["Geist", "Regular"],
        },
    }
}
//...

Doing so I was able to apply the font by doing <h2 className="font-geist">Hello</h2> However the issue with this is I have no idea how to get all the different subtypes (ultralight, light, regular, medium, semibold, etc...) I think im just misunderstanding how this works but please feel free to educate me I'm here to learn. Thank you

[manylovv]

Hey @dennis777! I encountered the same problem and found a solution.

First you need to add fonts to /src/assets/fonts directory:

/src
  /assets
    /fonts
      /Geist-Bold.woff2
      /Geist-Regular.woff2
      /Geist-Light.woff2

For loading fonts efortlessly, you should consider using an Unfonts plugin for vite:

// vite.config.ts
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import Unfonts from 'unplugin-fonts/vite';

export default defineConfig({
  plugins: [
    react(),
    Unfonts({
      custom: {
        families: [
          {
            name: 'Geist',
            src: './src/assets/fonts/geist/*.woff2',
          },
        ],
      },
    }),
  ],
});

Now the font is loaded, and we need to add it to the tailwind config:

// tailwind.config.js
export default {
   // ...
   theme: {
    extend: {
      fontFamily: {
        geist: ['Geist', 'sans-serif'],
      },
    },
  },
};

Finally you can use the font with different subtypes in your React code:

<>
  <div className="font-geist font-bold">Bold text</div>
  <div className="font-geist font-light">Light text</div>
  <div className="font-geist">Regular text</div>
</>

Here is the link to Tailwind docs with a list of all possible utils used to contol font-weight: https://tailwindcss.com/docs/font-weight

I hope it will help :)

[joshuaedo]

Additionally, remember to import the generated @font-face rules into your main.tsx file by adding the following line:

import 'unfonts.css';

Might save someone some time.