Next.js Discord

Discord Forum

Problem importing Fonts in NextJs14/TailwindCSS

Unanswered
Amur catfish posted this in #help-forum
Open in Discord
Amur catfishOP
Hello i've been working on a site and we can't seem to figure out why are the policies not being imported on our site, even tho the element inspector and computed values show "poppins" and "sofia".
This is my globals.css and tailwind css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans|Poppins'); /*i used to have  the default import but my senior dev told me to import like this*/ 

theme:{
      extend: {
        fontFamily: {
        poppins: ['Poppins'],
        sofia: ['Sofia Sans'],
      },
  }
}

i'd appreciate any help

1 Reply

piscopancer
@Amur catfish you should use fonts as variables instead
1. export the variable
import { Dela_Gothic_One, JetBrains_Mono, Wix_Madefor_Text } from 'next/font/google'

const _wix = Wix_Madefor_Text({ subsets: ['latin', 'cyrillic'], variable: '--font-sans', display: 'swap' })
const _dela = Dela_Gothic_One({ subsets: ['latin', 'cyrillic'], weight: ['400'], variable: '--font-display', display: 'swap' })
const _jetbrainsMono = JetBrains_Mono({ subsets: ['cyrillic', 'latin'], variable: '--font-mono', display: 'swap' })

export const fontVars = `${_wix.variable} ${_dela.variable} ${_jetbrainsMono.variable}`

2. put it in the root layout 
<html lang='ru'>
  <body className={fontVars}>
</html>

3. declare fonts in tw config
const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    fontFamily: {
      sans: 'var(--font-sans)',
      display: 'var(--font-display)',
      mono: 'var(--font-mono)',
    },
  },
}

4. use it
<div className='font-display'>blabla</div>