I have tried this as well

import {Lexend_Deca} from 'next/font/google';
import {Ultra} from 'next/font/google';
const lexandDeca = Lexend_Deca({
  subsets:['latin'],
  display:'swap',
  weight: '900',
  variable: '--font-lexand',
})

use it in component

<div className={`${lexandDeca .variable}`}> 

<div className={`${lexandDeca .className}`}> 

and also tried the other way around too

in globals.css

@font-face {
  font-family: 'fatFont';
  src: url('/fonts/creampuff/CREAMPUF4.ttf') format('truetype');
  font-weight: 900;
}

.fatFont {
  font-family: 'fatFont', sans-serif;
  font-weight: 900;
}

tailwind.config

      fontFamily: {
        sans: ['var(--font-inter)'],
        lexand: ['var(--font-lexand)'],
        fatFont: ['fatFont', 'sans-serif'],
      },

usage

           <div  className={`flex flex-col px-4 md:px-1 justify-center scale-125 items-center pb-3 text-2xl font-fatFont  >

or 

           <div  className={`flex flex-col px-4 md:px-1 justify-center scale-125 items-center pb-3 text-2xl fatFont  >