راه های افزودن فونت در next.js (گوگل فونت، لوکال، تیلویند)

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

در next.js هم راه های مختلفی برای اضافه کردن فونت به وب اپ وجود داره که قراره بررسیشون کنیم.

در این مطلب به این روش ها می پردازیم که شامل :

• گوگل فونت
• فونت محلی یا لوکال
• افزودن فونت از طریق تیلویند (TailwindCSS)

اضافه کردن سراسری از طریق گوگل فونت (Google Font)

در حالت معمول اپ نکست جی اس ما از این سیستم استفاده می کنه و فونت سراسری پروژه ما رو از طریق گوگل فونت کانفیگ می کنه، برای این امر کافیه فایل layout.tsx توی مسیر روت پروژه رو نگاه کنین که از فونت Inter استفاده شده و شما نیازه تا از طریق وبسایت google fonts فونت های خودتون رو انتخاب کنین

این کار در سه مرحله انجام میشه:

• اول باید فونت مورد نظر رو انتخاب و توی پروژه import کنیم
• تعریف فونت به صورت آبجکتی
• افزودن فونت به کلاس های body

و نتیجه کار هم که مشخصه توی تصویر زیر

اضافه کردن فونت از طریق Tailwind CSS

اگر با تیلویند کار کرده باشین این کتابخونه انعطاف خیلی خوبی برای کار با کلاس ها و استایل ها بهمون میده که این بار میخوایم با استفاده از خاصیت متغیرهایی که داره از چند فونت مختلف استفاده کنیم

• ابتدا کافیه فونت هایی که میخوایم رو توی فایل layout از طریق گوگل فونت اضافه کنیم به پروژه ;که ما دو فونت oswald و فونت inter رو اضافه کردیم
• برای هر کدوم از فونت ها متغیر تعریف کردیم و هر کدوم توی آبجکت جداگونه خودش و حتما حتما variables برای فونت ها باید تعریف بشه
• و همه فونت های تعریف شده رو به کلاس های body پاس میدیم که میخوایم از همه فونت ها توی پروژه استفاده کنیم
• حالا نوبت به تعریف فونت ها توی فایل tailwind.config.ts/js می رسه که باید فونت های تعریف شده توی layout برای تیلویند هم کانفیگ بشن تا بشه ازشون توی کلاس های تیلویندی استفاده کرد (عکس زیر):

ما توی بخش fontfamily فونت ها رو با همون اسمی که توی variables نوشتیم فراخوانی میکنیم

حالا کار تمومه و بریم توی صفحه نشونش بدیم

من به تایتل فونت Inter و به محتوا فونت oswald رو دادم و نتیجه توی مرورگر

دو فونت کاملا جدا که قابل تشخیصه که خانواده این فونت ها یکی نیست.

اضافه کردن فونت دلخواه به‌صورت لوکال یا محلی (Local Font)

اگر پروژه ما به هر زبانی بجز زبان انگلیسی بود یا اصلا پروژه ما به فونت هایی نیاز داشت که توی گوگل فونت قابل دسترسی نبود پس نمیتونیم از این قابلیت نکست برای فونت ها استفاده کنیم نیازه که فونت ها رو به‌صورت لوکال تو پروژه تعریف کنیم که ما ایرانی ها برای سایت های فارسی زبان بیشتر بهش نیاز داریم

پس به صورت زیر باز هم میتونیم اگر بخوایم به‌صورت سراسری تعریفش کنیم اونو انجام بدم که ما تو این مثال فونت یکان بخ رو میخوایم به صورت لوکال به پروژه اضافه کنیم

• ابتدا باید localFont از خود نکست فراخوانی بشه
• مسیر فونت رو براش تعریف کنیم و اونو توی یه متغیر قرار بدیم
• به کلاس های body اونو پاس بدیم و کار تمومه!!!!!!!

و خب اینم نتیجه کار :

امیدوارم مفید بوده باشه