استفاده از فونت‌های گوگل با Next.js و Tailwind CSS

خوشبختانه از Next.js نسخه 13.2 ویژگی داخلی جدیدی برای استفاده بهینه‌تر از فونت‌ها اضافه شده. این ویژگی استفاده از فونت‌های گوگل را بسیار آسان می‌کند.

سیستم next/font دارای ویژگی داخلی خودکاری است که هر فایل فونت را به صورت خودبخودی میزبانی می‌کند. با استفاده از این ویژگی، فونت‌های وب، بهینه‌سازی شده و بدون هیچ تغییر طرح بارگذاری می‌شوند.

همچنین، این سیستم فونت، امکان استفاده آسان از تمامی فونت‌های گوگل را با رعایت حفظ حریم شخصی و بهره‌وری فراهم می‌کند. در هنگام پروسه بیلد، فایل‌های CSS و فونت به همراه دیگر فایل‌های استاتیک خودبخودی میزبانی می‌شوند و هیچ درخواستی از مرورگر به گوگل ارسال نمی‌شود.

برای شروع، فونت مورد نظر خود را از next/font/google به عنوان یک تابع ایمپورت کنید. برای بهترین عملکرد و انعطاف‌پذیری، استفاده از وریبل فونت‌ها توصیه می‌شود.

برای استفاده از فونت در تمام صفحات خود، آن را در فایل _app.js در پوشه pages اضافه کنید، همانطور که در زیر نشان داده شده است.

import type { AppProps } from 'next/app'
import { Vazirmatn } from 'next/font/google'
import '../styles/globals.css'

const vazirmatn = Vazirmatn({
  subsets: ['latin', 'arabic'],
  variable: '--font-vazirmatn',
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <div className={`${vazirmatn.variable} font-sans`}>
        <Component {...pageProps} />
      </div>
    </>
  )
}

export default MyApp

در مثال زیر، از فونت Vazirmatn استفاده شده است (شما می‌توانید از هر فونتی از گوگل استفاده کنید).

با گزینهvariable، مشابه مثال بالا، فونت خود را با نام متغیر CSS مورد نظر خود بارگذاری کنید. سپس از متغیر vazirmatn.variable برای افزودن متغیر CSS به کد قالب خود استفاده کنید.

در نهایت، متغیر CSS را به پیکربندی Tailwind CSS خود اضافه کنید.

const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-vazirmatn)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}