Use Google Font in Next.js

// https://nextjs.org/docs/app/api-reference/components/font
// https://nextjs.org/docs/app/getting-started/fonts
 
import { DotGothic16 } from "next/font/google";
 
const dotGothic16 = DotGothic16({
  subsets: ['latin'],
  weight: '400',
  display: 'swap',
})
 
// use dotGothic16.className in className
 
// and use local font
 
import localFont from 'next/font/local'
 
export const YuKyokasho = localFont({
  src: [
    {
      path: '../public/fonts/YuKyokasho/YuKyokasho_b.ttf',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../public/fonts/YuKyokasho/YuKyokasho_Bold_b.ttf',
      weight: '700',
      style: 'normal',
    }
  ],
  variable: '--font-yukyokasho',
})
 
// in layout.tsx, use YuKyokasho.variable in className
// in css, use var(--font-yukyokasho)