- معرفی
- وزیرمتنVazirmatn
- استعدادEstedad
- میخکMikhak
- آرادArad
- ساحلSahel
- شبنمShabnam
- صمیمSamim
- نرمال سنسNormal Sans
- ناهیدNahid
- نوتو سنس عربیNoto Sans Arabic
- پرستوParastoo
- گنجنامهGanjnameh
- آریوArio
- مرکزی تکستMarkazi Text
- لالهزارLalezar
- امیریAmiri
- نوتو کوفی عربیNoto Kufi Arabic
- نوتو نسخ عربیNoto Naskh Arabic
- یونیکسلUnixel
- سورناSorena
- بهدادBehdad
- نیکاNika
- فربدFarbod
- شهابShahab
- نونNoon
- میلاد آزادMiladAzad
- ویژه آزادVizhehAzad
- تنهاTanha
- گندمGandom
- سپهرSepehr
- یکانXM Yekan
- تیترTitr
- شفیقXB Shafigh Uzbek
- نازنینNazanin
- وسطاXP Vosta
- سلسXB Sols
- ترافیکTerafik
- نازلیNazli
- کودکKoodak
- زیباXP Ziba
- تبریزXB Tabriz
- رویاXB Roya
- کیهانXB Kayhan
- ایران نستعلیقIran Nastaliq
- لطیفLateef
- شهرزاد جدیدScheherazade New
لطیف
منبعLateef
در حال بارگذاری فونت
وزن
نصب
روش نصب را انتخاب کنید
فونت را با next/font/google لود کنید؛ variable برای توکن CSS و className برای اعمال فوری روی کل صفحه.
import { Lateef } from "next/font/google"
const lateef = Lateef({
subsets: ["arabic"],
weight: ["400","700"],
variable: "--font-lateef",
display: "swap",
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html
lang="fa"
dir="rtl"
className={`${lateef.variable} ${lateef.className}`}
>
<body className="antialiased">{children}</body>
</html>
)
}اختیاری — اگر className روی html کافی است رد شوید. در غیر این صورت برای توکن Tailwind از @theme و بدون Tailwind از body استفاده کنید.
@theme inline {
--font-sans: var(--font-lateef), ui-sans-serif, system-ui, sans-serif;
}
body {
font-family: var(--font-lateef), ui-sans-serif, system-ui, sans-serif;
}