CODEWITHSUNDEEP
reactjsfontstailwind-cssjsxnext.js14
Sarah Cohen
Sarah Cohen

Reputation: 726

How can I properly import and render local fonts (not a google font) in a next.js 14 / tailwind project?

I've been trying to use a bunch of .otf font files in my next.js 14 project by calling the font in the element's classnames to keep with tailwind convention.

It seems to be that no matter what I do (granted I am not an expert and am definitely missing information) the browser renders the font-family as the default google fonts (font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";). The custom className of font-gotham is always overwritten by the ' html, :host ' css rule in the browser.

The only way I've gotten the gotham font to render on the page is when I directly create a css rule that sets the font-family by id or a directly overriding css rule on ' html, :host '.

But I want to be able to use tailwinds className or next.js so that I don't have to be going back to the globals.css file in the future. I tried adding code in the layout.jsx and tailwind.config.js files to try different ways and so there's definitely a lot of extraneous code since I'm not sure what is needed. Please let me know if I did something wrong and/or if there's a way to do what I'm wanting. TIA!

P.S. My font files are in public/fonts/

app/layout.jsx :

import '@styles/globals.css';
import localFont from 'next/font/local'

import Nav from '@components/Nav';
import Provider from '@components/Provider';

export const metadata = {
    title: 'School',
    description: 'School Official Website'
}

const gotham = localFont({
  src: [
    {
      path: '../public/fonts/Gotham-Thin.otf',
      weight: '100',
      style: 'normal',
    },
    {
      path: '../public/fonts/Gotham-Extra-Light.otf',
      weight: '200',
      style: 'normal',
    },
    {
      path: '../public/fonts/Gotham-Light.otf',
      weight: '300',
      style: 'normal',
    },
    {
      path: '../public/fonts/Gotham-Book-Regular.otf',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../public/fonts/Gotham-Medium.otf',
      weight: '500',
      style: 'normal',
    },
    {
      path: '../public/fonts/Gotham-Bold.otf',
      weight: '600',
      style: 'normal',
    },
    {
      path: '../public/fonts/Gotham-Black.otf',
      weight: '700',
      style: 'normal',
    },
    {
      path: '../public/fonts/Gotham-Regular.otf',
      weight: '800',
      style: 'normal',
    },
    {
      path: '../public/fonts/Gotham-Ultra.otf',
      weight: '900',
      style: 'normal',
    },
  ],
  variable: '--font-gotham'
})

const gothamFont = {
  fontFamily: `var(${gotham.variable})`
};

const RootLayout = ({ children }) => {
  return (
    <html lang='en' className={`${gotham.variable} font-gotham`}>
        <body>
            <div className='main'></div>

            <main className='app'>
                <Nav />
                { children }
            </main>
        </body>
    </html>
  )
}

export default RootLayout;

components/Nav.jsx :

"use client";

import Link from 'next/link';
import Image from 'next/image';
import { useState, useEffect } from 'react';

const Nav = () => {
    const [showSubmenu, setShowSubmenu] = useState(false);
    return (
        <nav id="nav" className="w-full break-words">

            <div id="upperNav" className="bg-silver w-full h-14 px-72 font-gotham text-sm text-black pt-5 flex justify-between">
                <div id="leftUpperNav" className="self-stretch gap-11 inline-flex">
                    <Link href="/">
                        <div className="font-gotham">Upper Left 1</div>
                    </Link>
                    <Link href="" className="">Upper Left 2</Link>
                    <Link href="" className="">Upper Left 3</Link>
                    {/* <Link href="" className="">Upper Left 4</Link> */}
                </div>
                <div id="rightUpperNav" className="self-stretch gap-11 inline-flex">
                    <Link href="" className="">Upper Right 1</Link>
                    <Link href="" className="">Upper Right 2</Link>
                </div>
            </div>

            <div id="lowerNav" className="pb-7 pt-[30px] self-stretch flex justify-around items-center bg-blue-default w-full h-[85px] px-[435px] justify-center font-gotham text-[22px] font-normal text-white group">
                <div className="relative flex-col justify-start items-center inline-flex text-white"
                    onMouseEnter={() => setShowSubmenu(true)}
                    onMouseLeave={() => setShowSubmenu(false)}>
                    <Link href="/about">
                        About
                    </Link>
                    <div className="w-full h-[3px] bg-transparent group-hover:bg-white transition-all duration-500 ease-in-out" />
                </div>

                <div>Academics</div>
                <div>Admissions</div>
                <div>News & Events</div>
                <div>Life</div>
            </div>

            {showSubmenu && (
                <div className="h-[143px] px-72 bg-white justify-end items-center inline-flex">
                    <div className="w-[1275px] self-stretch justify-between items-center inline-flex">
                        <Link href="/accreditation" className="text-black text-xl font-bold">
                            Accreditation
                        </Link>
                        {/* ...other submenu items... */}
                    </div>
                </div>
            )}


        </nav>
)}

export default Nav

tailwind.config.js :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  important: true,
  theme: {
    extend: {
      fontFamily: {
        'gotham': ['Gotham Regular'],
        'gotham-black': ['Gotham Black'],
        'gotham-medium': ['Gotham Medium'],
        'gotham-light': ['Gotham Light'],
        'gotham-extra-light': ['Gotham Extra Light'],
        'gotham-thin': ['Gotham Thin'],
        'gotham-book': ['Gotham Book'],
        'gotham-bold': ['Gotham Bold'],
        'gotham-ultra': ['Gotham Ultra'],
        gotham: ['var(--font-gotham)']
      },
    },
    screens: {
      xs: "540px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      lg_992: "992px",
    },
    container: {
      center: true,
      padding: {
        DEFAULT: "12px",
        sm: "1rem",
        lg: "45px",
        xl: "5rem",
        "2xl": "13rem",
      },
    },
    extend: {
      fontFamily: {
        gotham: ['var(--font-gotham)'],
      },
      fontSize: {
        'sm': '14px',
      },
      fontWeight: {
        'bold': 700,
      },
      textColor: {
        'white': '#FFFFFF',
      },
      colors: {
        colors: {
          'black': '#000000',
          'blue-850': "012f87",
          'blue-default': '#012F87', 
          'blue-950': '#0A1F4E',
          'neutral-950': '#090909',
          'blue-700': '#103CCC',
          'blue-600': '#1A73E8',
          'green-600': '#34A853',
          'blue-500': '#4285F4',
          'zinc-600': '#5B5B5B',
          'stone-500': '#666666',
          'red-900': '#7E2528',
          'zinc-500': '#808080',
          'stone-200': '#E5E3DF',
          'neutral-200': '#E6E6E6',
          'red-500': '#E94235',
          'zinc-100': '#F2F2F2',
          'neutral-100': '#F5F5F5',
          'yellow-500': '#FABB05',
          'yellow-400': '#FFC600',
          'white': '#FFFFFF',
        },
        
      },
    },
  },
  theme: {
    backgroundColor: theme => ({
      ...theme('colors'),
      'blue-default': '#012F87',
      'silver': '#F2F2F2',
    })
  },
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

styles/globals.css :

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
    font-family: 'Gotham Thin';
    src: url('../public/fonts/Gotham-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Regular';
    src: url('../public/fonts/Gotham-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Black';
    src: url('../public/fonts/Gotham-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Ultra';
    src: url('../public/fonts/Gotham-Ultra.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Bold';
    src: url('../public/fonts/Gotham-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Book';
    src: url('../public/fonts/Gotham-Book.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Extra Light';
    src: url('../public/fonts/Gotham-Extra-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Light';
    src: url('../public/fonts/Gotham-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Medium';
    src: url('../public/fonts/Gotham-Medium.otf') format('opentype');
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
} 

/* WORKS */
#lowerNav {
    font-family: 'Gotham Medium';
} 

/* #upperNav {
    font-family: 'Gotham Medium';
}

*/
/* 
html, :host {
    font-family: 'Gotham Bold';
} */

Upvotes: 0

Views: 542

Answers (1)

Sarah Cohen
Sarah Cohen

Reputation: 726

For some reason the default tailwind fonts were taking precedence over my custom ones. To solve this issue, I can increased the specificity of the Tailwind classes by using a layer of :not() pseudo-class.

I created a style/fonts.css file, moved all of the @font-face rules over from the styles/globals.css file and added :not(.not) rules:

:not(.not) .font-gotham-thin {
    font-family: 'Gotham Thin', sans-serif !important;
}

:not(.not) .font-gotham-extra-light {
    font-family: 'Gotham Extra Light', sans-serif !important;
}

:not(.not) .font-gotham-light {
    font-family: 'Gotham Light', sans-serif !important;
}

:not(.not) .font-gotham-book-regular {
    font-family: 'Gotham Book Regular', sans-serif !important;
}

:not(.not) .font-gotham-medium {
    font-family: 'Gotham Medium', sans-serif !important;
}

:not(.not) .font-gotham-bold {
    font-family: 'Gotham Bold', sans-serif !important;
}

:not(.not) .font-gotham-black {
    font-family: 'Gotham Black', sans-serif !important;
}

:not(.not) .font-gotham {
    font-family: 'Gotham Regular', sans-serif !important;
  }
  
:not(.not) .font-gotham-ultra {
    font-family: 'Gotham Ultra', sans-serif !important;
}

@font-face {
    font-family: 'Gotham Thin';
    src: url('../public/fonts/Gotham-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Regular';
    src: url('../public/fonts/Gotham-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Black';
    src: url('../public/fonts/Gotham-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Ultra';
    src: url('../public/fonts/Gotham-Ultra.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Bold';
    src: url('../public/fonts/Gotham-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Book';
    src: url('../public/fonts/Gotham-Book.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Extra Light';
    src: url('../public/fonts/Gotham-Extra-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Light';
    src: url('../public/fonts/Gotham-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Medium';
    src: url('../public/fonts/Gotham-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Book Regular';
    src: url('../public/fonts/Gotham-Book-Regular.otf') format('opentype');
}

I removed all font-family rules from the styles/globals.css file altogether. Then I imported the styles/fonts.css file underneath the styles/globals.css file in my app/layout.jsx file and removed all the extra font-family importing:

import '@styles/globals.css';
import '@styles/fonts.css';
import localFont from 'next/font/local'

import Nav from '@components/Nav';
import Provider from '@components/Provider';

export const metadata = {
    title: 'School',
    description: 'School Official Website'
}

const RootLayout = ({ children }) => {
  return ( 
    <html lang='en' > 
        <body>
            <div className='main'></div>

            <main className='app'>
                <Nav />
                { children }
            </main>
        </body>
    </html>
  )
}

export default RootLayout;

I removed all font-family rules from my tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  important: true,
  theme: {
    screens: {
      xs: "540px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      lg_992: "992px",
    },
    container: {
      center: true,
      padding: {
        DEFAULT: "12px",
        sm: "1rem",
        lg: "45px",
        xl: "5rem",
        "2xl": "13rem",
      },
    },
    extend: {
      fontSize: {
        'sm': '14px',
      },
      fontWeight: {
        'bold': 700,
      },
      textColor: {
        'white': '#FFFFFF',
      },
      colors: {
        colors: {
          'black': '#000000',
          'blue-850': "012f87",
          'blue-default': '#012F87', 
          'blue-950': '#0A1F4E',
          'neutral-950': '#090909',
          'blue-700': '#103CCC',
          'blue-600': '#1A73E8',
          'green-600': '#34A853',
          'blue-500': '#4285F4',
          'zinc-600': '#5B5B5B',
          'stone-500': '#666666',
          'red-900': '#7E2528',
          'zinc-500': '#808080',
          'stone-200': '#E5E3DF',
          'neutral-200': '#E6E6E6',
          'red-500': '#E94235',
          'zinc-100': '#F2F2F2',
          'neutral-100': '#F5F5F5',
          'yellow-500': '#FABB05',
          'yellow-400': '#FFC600',
          'white': '#FFFFFF',
        },
        
      },
    },
  },
  theme: {
    backgroundColor: theme => ({
      ...theme('colors'),
      'blue-default': '#012F87',
      'silver': '#F2F2F2',
    })
  },
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

And here is my current components/Nav.jsx with working redering fonts:


import Link from 'next/link';
import Image from 'next/image';
import { useState, useEffect } from 'react';

const Nav = () => {
    const [showSubmenu, setShowSubmenu] = useState(false);
    return (
        <nav id="nav" className="w-full break-words">

            <div id="upperNav" className="bg-silver w-full h-14 px-72 font-gotham-medium text-sm text-black pt-5 flex justify-between">
                <div id="leftUpperNav" className="self-stretch gap-11 inline-flex">
                    <Link href="/" className="">Upper Left 1</Link>
                    <Link href="" className="">Upper Left 2</Link>
                    <Link href="" className="">Upper Left 3</Link>
                    {/* <Link href="" className="">Upper Left 4</Link> */}
                </div>
                <div id="rightUpperNav" className="self-stretch gap-11 inline-flex">
                    <Link href="" className="">Upper Right 1</Link>
                    <Link href="" className="">Upper Right 2</Link>
                </div>
            </div>

            <div id="lowerNav" className="pb-7 pt-[30px] self-stretch flex justify-around items-center bg-blue-default w-full h-[85px] px-[435px] justify-center font-gotham-bold text-[22px] text-white group">
                <div className="relative flex-col justify-start items-center inline-flex text-white"
                    onMouseEnter={() => setShowSubmenu(true)}
                    onMouseLeave={() => setShowSubmenu(false)}>
                    <Link href="/about">
                        About
                    </Link>
                    <div className="w-full h-[3px] bg-transparent group-hover:bg-white transition-all duration-500 ease-in-out" />
                </div>

                <div>Academics</div>
                <div>Admissions</div>
                <div>News & Events</div>
                <div>Life at School</div>
            </div>

            {showSubmenu && (
                <div id="lowerSubNav1" className="h-[143px] px-72 bg-white justify-end items-center inline-flex font-gotham-medium">
                    <div className="w-[1275px] self-stretch justify-between items-center inline-flex">
                        <Link href="/accreditation" className="text-black text-xl font-bold">
                            Accreditation
                        </Link>
                        {/* ...other submenu items... */}
                    </div>
                </div>
            )}


        </nav>
    )
}

export default Nav

Upvotes: 0

Related Questions