برنامه نویسی

چگونه فونت های سفارشی را در قالب های Next.js و Tailwind CSS اضافه کنیم

Rate this post

از زمان راه‌اندازی Cruip، هزاران توسعه‌دهنده قالب‌های ما را خریداری کرده‌اند و بسیاری از آنها از ما درخواست کمک کرده‌اند تا آنها را بر اساس نیازهایشان شخصی‌سازی کنیم.

ما عاشق کمک به مشتریان خود برای دستیابی به بهترین نتیجه ممکن با محصولات خود هستیم، اما از آنجایی که ما یک تیم کوچک دو نفره هستیم و پایگاه مشتریان ما همچنان در حال رشد است (خوشبختانه)، تصمیم گرفتیم مجموعه ای از مقالات/راهنماها را بر اساس رایج ترین سوالات سفارشی سازی شما شروع کنیم. به این ترتیب، امیدواریم بخشی از زمان خود را بهینه کنیم (که بتوانیم برای ایجاد محصولات بیشتر سرمایه گذاری کنیم) و خدمات بهتری را به شما ارائه دهیم!

بیایید با یک راهنما شروع کنیم چگونه فونت های قالب های Tailwind CSS ساخته شده با Next.js را سفارشی کنیم. گام به گام، شما را از طریق مدیریت فونت راهنمایی می کنیم و به شما نشان می دهیم که چگونه نسخه های سفارشی الگوها را ایجاد کنید که آنها را واقعاً در نوع خود بی نظیر کند.

همانطور که می دانید، نسخه های React قالب های Cruip با آن ساخته شده اند Tailwind CSS و استفاده کنید فهرست برنامه جدید Next.js 13 (روتر برنامه). علاوه بر این، در زمان نوشتن، همه قالب ها از فونت های گوگل و در برخی موارد از فونت های محلی استفاده می کنند. بنابراین، نحوه افزودن فونت جدید گوگل، جایگزینی فونت فعلی، استفاده از فونت های محلی و حتی استفاده از فونت های سیستمی برای بهینه سازی عملکرد وب سایت خود را نشان خواهیم داد.

نحوه استفاده از فونت ها در قالب های Cruip

قبل از بررسی مثال‌های عملی، اجازه دهید ابتدا مروری کوتاه بر نحوه استفاده از فونت‌ها در قالب‌های Cruip داشته باشیم. به طور کلی، ما را تعریف می کنیم فونت اصلی روی تگ بدنه. در مواردی که از فونت ثانویه نیز استفاده می کنیم، مستقیماً آن را روی هر عنصر با استفاده از کلاس های Tailwind CSS تعریف می کنیم.

برای مثال الگوی Tidy را در نظر بگیرید. فونت پایه Inter است که بر روی برچسب بدنه با علامت تعریف شده است font-inter کلاس اما برای سرفصل ها از فونت سریف Playfair Display استفاده می کنیم که روی هر عنصر تعریف شده است (h1، h2، و h3) با استفاده از font-playfair-display کلاس

حال، ممکن است کسی اعتراض کند و بپرسد که چرا ما فونت را برای سرفصل‌ها مستقیماً در CSS تعریف نکرده‌ایم تا از تکرار آن برای هر عنصر جلوگیری کنیم. در واقع انتخاب معقولی بود، اما ما ترجیح دادیم فلسفه Tailwind CSS را بپذیریم، که استفاده از کلاس‌ها را برای تعریف سبک‌های عنصر تشویق می‌کند. علاوه بر این، به این ترتیب، به راحتی می توان با تغییر دادن کلاس، به فونت دیگری برای سرفصل ها سوئیچ کرد.

افزودن فونت گوگل جدید به قالب

فرض کنید می‌خواهیم فونت سومی را برای بخش‌های خاصی از قالب اضافه کنیم، و آن فونت چیزی است که نمی‌توانی انجام دهی. ابتدا باید فونت را با استفاده از بارگذاری کنیم next/font. به طور معمول، ما از اصلی استفاده می کنیم layout.tsx برای این پرونده تشکیل دهید با این حال، اگر می دانیم که فقط در یک جزء خاص به این فونت نیاز داریم، تمرین خوبی است که آن را مستقیماً در آن مؤلفه بارگذاری کنیم. به این ترتیب از بارگذاری فونت های غیر ضروری در کل وب سایت جلوگیری می کنیم.

برای استفاده از فونت در تمام صفحات، اجازه دهید کد زیر را به آن اضافه کنیم layout.tsx فایل:

  import { Nothing_You_Could_Do } from 'next/font/google'
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با کد بالا فونت را وارد کردیم هیچ کاری نمی توانستید انجام دهید. به خاطر داشته باشید که برای فونت های گوگل با چند کلمه در نام خود، باید فاصله ها را با زیرخط جایگزین کرد و هر کلمه باید با یک حرف بزرگ شروع شود. در این مورد، فونت “Nothing You Could Do” نامیده می شود، بنابراین باید از آن استفاده کنیم Nothing_You_Could_Do برای واردات آن اگر در مورد نام فونت مطمئن نیستید، همیشه می توانید صادرات را بررسی کنید next/font/google در داخل node_modules پوشه

حالا بیایید یک متغیر برای فونت تعریف کنیم:

  const nycd = Nothing_You_Could_Do({
    subsets: ['latin'],
    variable: '--font-nycd',
    weight: '400',
    display: 'swap'
  })
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نام متغیر دلخواه است اما باید با آنچه در فایل پیکربندی Tailwind CSS تعریف می‌کنیم، مطابقت داشته باشد.

بعد، بیایید متغیر را به عنصر ظرفی که می‌خواهیم از فونت استفاده کنیم، اضافه می‌کنیم، که در این مورد body عنصر:

  <body className={`${inter.variable} ${playfair.variable} ${nycd.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نهایت باید فونت را به فایل پیکربندی Tailwind CSS اضافه کنیم. برای انجام این کار، را باز کنید tailwind.config.js فایل و اضافه کنید font-nycd متغیر به موضوع ما:

  fontFamily: {
    inter: ['var(--font-inter)', 'sans-serif'],
    'playfair-display': ['var(--font-playfair-display)', 'serif'],
    'nycd': ['var(--font-nycd)', 'cursive'],
  }
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

عالی! اکنون می توانیم فونت را روی هر عنصر HTML به سادگی با اضافه کردن آن استفاده کنیم font-nycd کلاس، به عنوان مثال:

  <p className="font-nycd">Hello world!</h1>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جایگزینی یک فونت گوگل با فونت دیگر

بیایید به آن بچسبیم مرتب قالب و فرض کنید می خواهیم آن را جایگزین کنیم نمایشگر Playfair فونت مورد استفاده برای سرفصل ها با فونت Poppins.

اول، در layout.tsx فایل، ما وارد کردن فونت را تغییر می دهیم. پس این خط:

  import { Inter, Playfair_Display } from 'next/font/google'
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این می شود:

  import { Inter, Poppins } from 'next/font/google'
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بعد، این بلوک کد را حذف می کنیم:

  const playfair = Playfair_Display({
    subsets: ['latin'],
    variable: '--font-playfair-display',
    display: 'swap'
  })
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و آن را با این جایگزین کنید:

  const poppins = Poppins({
    subsets: ['latin'],
    variable: '--font-poppins',
    display: 'swap'
  })
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نهایت، در layout.tsx فایل را جایگزین می کنیم playfair متغیر با poppins. پس این خط:

  <body className={`${inter.variable} ${playfair.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این می شود:

  <body className={`${inter.variable} ${poppins.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

حالا بیایید آن را ویرایش کنیم tailwind.config.js فایل و فونت ها را در آنجا نیز جایگزین کنید. بنابراین این بلوک کد:

  fontFamily: {
    inter: ['var(--font-inter)', 'sans-serif'],
    'playfair-display': ['var(--font-playfair-display)', 'serif'],
  },
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تغییرات به این:

  fontFamily: {
    inter: ['var(--font-inter)', 'sans-serif'],
    poppins: ['var(--font-poppins)', 'sans-serif'],
  },
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله آخر استفاده از کلاس مناسب برای فونت Poppins در هر تگ عنوان است. برای انجام سریع و دقیق این کار، می‌توانیم یک جستجوی سراسری برای رشته «font-playfair-display» انجام دهیم و از تابع «Replace all» برای جایگزینی آن با «font-poppins» استفاده کنیم. به این ترتیب، ما همه نمونه های را جایگزین خواهیم کرد font-playfair-display با font-poppins. معمولاً همه ویرایشگرها (ما از VS Code استفاده می کنیم) یک ویژگی برای جستجوی یک رشته در فایل های خاص دارند. از آنجایی که می خواهیم جایگزین را فقط در فایل های .tsx انجام دهیم، می توانیم آن را مشخص کنیم *.tsx در فیلد «فایل‌ها برای گنجاندن»

استفاده از فونت محلی

برای افزودن کمی منحصر به فرد بودن به طراحی قالب خود، از برخی فونت‌ها استفاده کرده‌ایم که در کتابخانه فونت‌های Google موجود نیستند، مانند Aspekta یا Cabinet Grotesk.

این فونت ها در دسترس هستند woff2 فرمت و به راحتی در هر قالب Next.js دیگری گنجانده شود. بیایید بلافاصله به یک مثال عملی بپردازیم.

فرض کنید می خواهیم از نسخه پررنگ فونت Aspekta برای سرفصل های قالب Tidy استفاده کنیم. ما فونت را از مخزن Github دانلود می کنیم و فایل را اضافه می کنیم Aspect-700.woff2 در public/fonts پوشه پروژه ما

بعد، فونت را وارد می کنیم layout.tsx فایل مانند این:

  import localFont from 'next/font/local'
  const aspekta = localFont({
    src: [
      {
        path: '../public/fonts/Aspekta-700.woff2',
        weight: '700',
      },       
    ],
    variable: '--font-aspekta',
    display: 'swap',  
  })
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید متغیر را اضافه کنیم aspekta به کلاس های body عنصر:

  <body className={`${inter.variable} ${aspekta.variable} ${nycd.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مرحله، اجازه دهید تغییر دهید tailwind.config.js فایل مانند این:

  fontFamily: {
    inter: ['var(--font-inter)', 'sans-serif'],
    'aspekta': ['var(--font-aspekta)', 'sans-serif'],
  }
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نهایت، برای استفاده از فونت جدید برای سرفصل ها، باید کلاس را جایگزین کنیم font-playfair-display با font-aspekta در هر تگ عنوان یک بار دیگر، ما یک جستجوی سراسری برای رشته “font-playfair-display” انجام می دهیم و از تابع “Replace all” برای جایگزینی آن با “font-aspekta” استفاده می کنیم.

استفاده از فونت سیستم

در این آخرین مرحله از راهنما، نحوه و زمان استفاده از فونت سیستم برای وب سایت Next.js خود را توضیح خواهیم داد.

اگرچه Next.js 13 مدیریت بهینه بارگیری فونت را تضمین می کند، از مشکلات تغییر چیدمان تجمعی (CLS) جلوگیری می کند، استفاده از فونت های سیستم اضافی را ارائه می دهد. مزایایی از نظر عملکرد و سرعت بارگذاری سایت. از آنجایی که این فونت ها قبلاً در سیستم عامل یا دستگاه نصب شده اند، نیازی به دانلود اضافی مانند فونت های Google یا فونت های محلی ندارند.

علاوه بر این، استفاده از فونت سیستمی این امر را تضمین می کند ظاهر متن با بقیه سیستم عامل یا دستگاه سازگار است. این مطمئناً یک مزیت است، اما می تواند یک محدودیت نیز باشد زیرا فونت سیستم ممکن است با طراحی وب سایت شما هماهنگ نباشد. به عبارت دیگر، ممکن است کنترل کاملی بر طراحی تایپوگرافی سایت خود نداشته باشید.

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

در نهایت، اگر طراحی متن سفارشی در اولویت نباشد و هدف اصلی اطمینان از خوانایی خوب و ارائه منسجم باشد، استفاده از فونت سیستمی می تواند یک انتخاب عملی باشد. وب‌سایت‌های محبوب بسیاری از فونت‌های سیستمی استفاده می‌کنند، از GitHub گرفته تا Booking، از Wikipedia تا Medium، بنابراین شما در شرکت خوبی خواهید بود!

برای اطلاعات بیشتر، خواندن این مقاله عالی را توصیه می کنیم.

استفاده از فونت های سیستم بسیار ساده است: هیچ وارد کردن فونت لازم نیست! بنابراین، بیایید فرض کنیم می خواهیم فقط از فونت های سیستمی در Tidy استفاده کنیم. برای انجام این کار، بلوک های کد زیر را از قسمت حذف می کنیم layout.tsx فایل:

  import { Inter, Playfair_Display } from 'next/font/google'
  const inter = Inter({
    subsets: ['latin'],
    variable: '--font-inter',
    display: 'swap'
  })
  const playfair = Playfair_Display({
    subsets: ['latin'],
    variable: '--font-playfair-display',
    display: 'swap'
  })
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید آن را نیز حذف کنیم inter و playfair متغیرهای کلاس های the body عنصر، و همچنین font-inter کلاس:

  <body className={`antialiased bg-white text-slate-800 tracking-tight`}>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بعد، در tailwind.config.js فایل، ما می‌توانیم با خیال راحت کل شی‌ای را که خانواده فونت‌های مورد استفاده را تعریف می‌کند حذف کنیم:

  fontFamily: {
    inter: ['var(--font-inter)', 'sans-serif'],
    'playfair-display': ['var(--font-playfair-display)', 'serif'],
  },
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نهایت، با استفاده از یک جستجوی سراسری، تمام کلاس‌های غیرضروری را که به‌عنوان «font-playfair-display» تعریف شده‌اند، حذف می‌کنیم.

پس از انجام این مراحل، پیشنهاد می کنیم تایپوگرافی وب سایت خود را بر روی دستگاه ها و سیستم عامل های مختلف آزمایش کنید تا مطمئن شوید که طراحی متن انتظارات شما را برآورده می کند.

نتیجه گیری

انتخاب فونت مناسب می تواند به طور قابل توجهی بر تجربه کلی کاربر تأثیر بگذارد و پیام مورد نظر را به طور موثر منتقل کند. چه فونت های گوگل را انتخاب کنید، چه فونت های محلی یا فونت های سیستمی، هر گزینه مزایا و ملاحظات خاص خود را دارد.

ما امیدواریم که این راهنما برای نشان دادن نحوه سفارشی کردن قالب‌های Tailwind CSS به شما مفید بوده باشد. کد نویسی مبارک!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا