فونت های وب می توانند به شما کمک کنند برند خود را طراحی کنید یا طراحی سایت خود را زیبا کنید، اما بیش از یک راه برای استفاده از آنها وجود دارد.
فونت های وب راهی عالی برای افزودن فونت های سفارشی به وب سایت شما هستند. این فونت ها ممکن است در سیستم کاربر در دسترس نباشند، بنابراین باید آنها را با میزبانی آنها یا ارجاع آنها از طریق CDN در پروژه خود قرار دهید.
یاد بگیرید که چگونه با استفاده از این دو روش، فونت های وب را در وب سایت Next.js قرار دهید.
استفاده از فونت های خود میزبان در Next.js
برای افزودن فونت های خود میزبان در Next.js، باید از قانون CSS@font-face استفاده کنید. این قانون به شما امکان می دهد فونت های سفارشی را به یک صفحه وب اضافه کنید.
قبل از استفاده از font-face، باید فونت هایی را که می خواهید استفاده کنید دانلود کنید. سایت‌های زیادی در اینترنت وجود دارند که فونت‌های رایگان را ارائه می‌دهند، از جمله فونت‌های Google، fontspace و وب‌سایت‌های dafont.
هنگامی که فونت های وب را دانلود کردید، آنها را به فرمت های مختلف فونت تبدیل کنید تا از چندین مرورگر پشتیبانی کنید. برای این کار می توانید از ابزارهای آنلاین رایگان تبدیل فونت استفاده کنید. مرورگرهای وب مدرن از فرمت های .woff و .woff2 پشتیبانی می کنند. اگر نیاز به پشتیبانی از مرورگرهای قدیمی دارید، باید فرمت‌های .eot و ttf. را نیز ارائه دهید.
یک پوشه جدید به نام fonts در فهرست سایت خود ایجاد کنید و فایل های فونت تبدیل شده خود را در آنجا ذخیره کنید.
گام بعدی این است که چهره‌های فونت را در فایل styles/global.css قرار دهید تا برای کل وب‌سایت در دسترس قرار گیرند. این مثال چهره های فونت فونت mermaid را به صورت پررنگ نشان می دهد:
@font-face {
font-family: 'Mermaid';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
url('Mermaid-Bold.woff2') format('woff2'),
url('Mermaid-Bold.woff') format('woff'),
url('Mermaid-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
هنگامی که فایل‌های فونت را اضافه کردید، می‌توانید از آن فونت‌ها در یک فایل CSS در سطح مؤلفه استفاده کنید:
h1 {
font-family: Mermaid;
}
شامل فونت های وب به Next.js از طریق CDN
برخی از وب سایت ها فونت های وب را از طریق CDN ارائه می کنند که می توانید آن را به برنامه خود وارد کنید. راه‌اندازی این رویکرد آسان است زیرا نیازی به دانلود فونت یا ایجاد چهره‌های فونت ندارید. علاوه بر این، اگر از فونت های Google یا TypeKit استفاده می کنید، Next.js به طور خودکار بهینه سازی را انجام می دهد.
می‌توانید فونت‌هایی را از CDN با استفاده از تگ پیوند یا قانون import @ درون یک فایل CSS اضافه کنید.
نحوه وارد کردن فونت به پروژه Next.js با استفاده از برچسب پیوند
تگ پیوند همیشه درون تگ head یک سند HTML قرار می گیرد. برای افزودن تگ head در Next.js، باید یک سند سفارشی ایجاد کنید. این سند تگ head و body مورد استفاده برای ارائه هر صفحه را تغییر می دهد.
استفاده از این ویژگی سند سفارشی را با ایجاد فایل /pages/_document.js شروع کنید.
سپس لینک فونت را در سر فایل _document.js قرار دهید.
import Document, { Html, Head, Main, NextScript } from"next/document";
classMyDocumentextendsDocument {
staticasync getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
exportdefault MyDocument;
نحوه استفاده از قانون Import@ برای گنجاندن فونت ها در پروژه Next.js
گزینه دیگر استفاده از قانون @import در فایل CSS است که می خواهید از فونت استفاده کنید.
برای مثال، با وارد کردن فونت وب در فایل styles/global.css، فونت را در کل پروژه در دسترس قرار دهید.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
اکنون می توانید خانواده فونت را در یک انتخابگر CSS به این صورت ارجاع دهید:
h1 {
font-family:'Libre Caslon Display', serif;
}
قانون Import@ به شما امکان می دهد یک فونت را در یک فایل CSS موجود وارد کنید. استفاده از تگ لینک باعث می شود که فونت در کل سایت قابل دسترسی باشد.
آیا باید فونت ها را به صورت محلی میزبانی کنید یا آنها را از طریق CDN وارد کنید؟
فونت هایی که به صورت محلی میزبانی می شوند معمولا سریعتر از فونت های وارد شده از CDN هستند. این به این دلیل است که مرورگر مجبور نیست پس از بارگیری صفحه وب، درخواست اضافی برای فونت CDN ارسال کند.
اگر می خواهید از فونت های وارداتی استفاده کنید، آنها را از قبل بارگذاری کنید تا عملکرد سایت بهبود یابد. اگر فونت‌ها در فونت‌های Google یا Typekit موجود هستند، می‌توانید آنها را وارد کنید و از ویژگی‌های بهینه‌سازی Next.js استفاده کنید.