بررسی اجمالی
در این مقاله، من به شما نشان خواهم داد که چگونه Nextjs 13 اکنون به ما اجازه می دهد تا فونت های خود را با next/font بسته بندی نیازی به دانلود فونت های گوگل به صورت محلی و نیازی به لینک های CDN نیست.
فونت های گوگل
برای استفاده از فونت های گوگل در برنامه Nextjs خود، باید از فونت های توصیه شده استفاده کنید next/fonts/google برای بارگیری فونت های گوگل
برای افزایش حریم خصوصی و عملکرد، next/font به طور خودکار فونت های شما (از جمله فونت های سفارشی) را بهینه می کند و درخواست های شبکه خارجی را حذف می کند.
برای این پست، ما از فونت های poppings گوگل استفاده می کنیم.
خود را پیدا کنید Layout.tsx و این قطعه کد را اضافه کنید، آن را برای استفاده خود ویرایش کنید.
import { Poppins } from 'next/font/google';
const poppinsFont = Poppins({
weight: '700',
subsets: ['latin'],
variable: '--font-poppins',
});
مطمئن شوید که از variable configuration prop، که از آن برای ایجاد یک تعریف برای یک CSS استفاده خواهید کرد --var برای هر فونت این تضمین می کند که ما بهترین عملکرد و انعطاف پذیری را داریم.
فونت محلی
با همین کتابخانه next/font/local شما می توانید از فونت های محلی ذخیره شده به صورت محلی در مخزن خود استفاده کنید، بنابراین نیازی به دانلود ماژول اضافی نیست.
مطمئن شوید که مسیر فونت ذخیره شده محلی را به درستی قرار داده اید، خوب است که آن را در فهرست عمومی خود میزبانی کنید. به یاد داشته باشید که از variable configuration prop، که از آن برای ایجاد یک تعریف برای یک CSS استفاده خواهید کرد --var برای هر فونت
این فایل را به فایل خود اضافه کنید layouts.tsx فایل
import localFont from 'next/font/local';
const studioPro = localFont({
src: [
{
path: '../../public/font/studio-pro-bold.ttf',
weight: '500',
style: 'normal',
},
{
path: '../../public/font/studio-pro-medium.ttf',
weight: '400',
style: 'normal',
},
],
variable: '--font-studio-pro',
});
دسترسی به فونت
برای دسترسی به فونت از طریق برنامه خود، باید متغیرهای تولید شده را به کلاس wrapper in منتقل کنید Layout.tsx. این اطمینان حاصل می کند که متغیری که پاس داده اید برای هر مؤلفه والد قابل دسترسی است.
شما Layout.tsx فایل باید شبیه این باشد
import { Poppins } from 'next/font/google';
import localFont from 'next/font/local';
import React from "react";
export default function RootLayout({ children }: {children: React.ReactNode }) {
const poppinsFont = Poppins({
weight: '700',
subsets: ['latin'],
variable: '--font-poppins',
});
const studioPro = localFont({
src: [
{
path: '../../public/font/studio-pro-bold.ttf',
weight: '600',
style: 'normal',
},
{
path: '../../public/font/studio-pro-medium.ttf',
weight: '400',
style: 'normal',
},
],
variable: '--font-studio-pro',
});
return (
<html lang='en'>
<head />
<body className={`${poppinsFont.variable} ${studioPro.variable}`}>
{children}
</body>
</html>
);
}
شما باید چیزی شبیه به این را در ابزارهای مرورگر کروم خود مشاهده کنید
به فونت فایل های CSS خود دسترسی پیدا کنید
در اینجا نحوه دسترسی به فونت در یک فایل css ساده آمده است، می توانید از آن در فایل خود استفاده کنید global.css فایل
html {
font-family: var(--font-poppins);
}
h1 {
font-family: var(--font-studio-pro);
}
با Tailwind به فونت دسترسی پیدا کنید
ما این فونت را در سطح جهانی در دسترس قرار داده ایم، اما به راهی نیاز داریم تا به Tailwind بگوییم که این فونت ها اکنون در دسترس هستند.
نحوه استفاده از این فونت در Tailwind، این را به آن اضافه کنید extend شی در داخل theme در شما tailwind.config.ts فایل.
export default {
theme: {
extend: {
fontFamily: {
"font-poppins": "var(--font-poppins)",
"studio-pro": "var(--font-studio-pro)",
}
}
}
در اینجا نحوه استفاده از فونت در یک جزء آورده شده است.
const SimpleComponent: React.FC = () => (
<p className="font-poppins">
This is with the Poppins Font
</p>
);
export default SimpleComponent;
افکار نهایی
از خواندن متشکریم، ما دیدیم که افزودن فونت به برنامه Nextjs چقدر آسان است، توصیه می کنم از این روش برای افزودن فونت در برنامه Nextjs خود استفاده کنید زیرا این روش بهینه شده توسط اسناد توصیه شده است. وقت آزمایش است!! منتظر وب سایت های شگفت انگیزی که با Nextjs خواهید ساخت.
با من ارتباط برقرار کن
لینکدین: https://www.linkedin.com/in/mitchel-inaju/
توییتر: https://twitter.com/mitchelinaju
dev.to: https://dev.to/inaju
