کتابخانه
@fontsource-variable/roboto یه بسته npm برای میزبانی خود فونت Roboto روی سرور خودته، به شکل فونت متغیر. به جای گرفتن فونت از سرویس های خارجی مثل Google Fonts، فایل ها رو کنار پروژه نگه می داری و با یه import ساده به صفحه وصلشون می کنی. برای متن لاتین مناسبه، ولی حروف فارسی نداره.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۲ مگابایت· ۶۵ فایل· انتشار
SHA-256: 0fde275fee8fefa989fdafdde94728ad32408e1c02cf7983dd4338c5fa2d1905
@fontsource-variable/roboto یه بسته npm برای میزبانی مستقیم فونت Roboto توی پروژه خودته. Roboto رو گوگل طراحی کرده و با مجوز متن باز منتشر شده. این بسته فایل های فونت رو مرتب و آماده در اختیارت می ذاره، پس لازم نیست فونت رو از سرویس بیرونی لود کنی. نسخه variable هم یعنی به جای یه فایل جدا برای هر وزن (معمولی، نیمه ضخیم، ضخیم و ...)، یه فایل کل بازه وزن ها رو پوشش می ده.
چرا این برای سایت ایرانی به درد می خوره؟ وقتی اینترنت بین الملل کند یا محدود می شه، لود فونت از سرور خارجی می تونه صفحه رو معطل کنه. گاهی هم فونت اصلاً نمیاد و مرورگر می ره سراغ فونت پیش فرض. وقتی فونت رو خودت میزبانی می کنی، فایل از همون هاست سایتت میاد و به مسیر بین الملل بستگی نداره. نتیجه اینه که ظاهر سایت توی همه شرایط یکدست می مونه.
یه نکته رو از اول جدی بگیر: Roboto حروف فارسی نداره. این فونت برای متن لاتین، عدد انگلیسی و رابط های انگلیسی ساخته شده. اگه سایتت فقط فارسیه، این بسته به کارت نمیاد. ولی اگه توی یه سایت فارسی نام برند، کد محصول، منوی انگلیسی یا داشبورد دوزبانه داری، می تونی Roboto رو کنار یه فونت فارسی مثل وزیرمتن توی font-family بذاری. مرورگر حروف لاتین رو با Roboto نشون می ده و حروف فارسی رو با فونت بعدی.
این بسته بیشتر به درد پروژه هایی می خوره که ابزار build دارن، مثل Vite، webpack یا Next.js. توی یه قالب وردپرس کلاسیک که با npm ساخته نشده، باید فایل های فونت رو از بسته بیرون بکشی و خودت با @font-face معرفی شون کنی. اسم خانواده فونت توی CSS هم Roboto Variable هست، نه فقط Roboto. اگه فقط دو سه وزن لازم داری، قبل از انتخاب نسخه variable مستندات بسته رو ببین. ممکنه برای یه پروژه کوچیک نسخه ساده تر بهتر باشه.
نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم در دسترسه. پس حتی وقتی دسترسی به npm یا منابع خارجی مشکل داره، می تونی فایل ها رو از همین صفحه برداری.
راه استفاده به این بستگی داره که پروژه ات ابزار build داره یا نه. توی حالت معمول، مراحل این طوره:
آخرش توی تب Network مرورگر چک کن. فایل های فونت باید از دامنه خود سایتت لود بشن، نه از آدرس خارجی. اگه هنوز درخواستی به سرویس بیرونی می ره، احتمالاً یه لینک قدیمی فونت توی قالب یا افزونه مونده که باید حذفش کنی.
نه. Roboto حروف فارسی و عربی نداره و برای خط های لاتین، سیریلیک، یونانی و چند خط دیگه ساخته شده. اگه توی سایت فارسی ازش استفاده کنی، فقط حروف و عدد انگلیسی با این فونت نوشته می شن و متن فارسی می ره سراغ فونت بعدی. پس یه فونت فارسی هم توی font-family بذار.
توی نسخه معمولی برای هر وزن یه فایل جدا لازمه. توی نسخه variable یه فایل چند وزن رو پوشش می ده و می تونی هر مقدار وزن توی بازه فونت رو انتخاب کنی. اگه چند وزن مختلف لازم داری، معمولاً راحت تره. اگه فقط یک یا دو وزن می خوای، نسخه ساده هم می تونه کافی باشه.
بله، ولی کار کمی دستی تر می شه. فایل های فونت رو از بسته برمی داری، توی پوشه قالب یا پروژه می ذاری و با @font-face توی CSS معرفی شون می کنی. اگه ابزار build داری، import مستقیم بسته ساده ترین راهه و مسیر فایل ها رو هم خودش درست می کنه.
اگه قالبت با ابزار build ساخته شده، بسته رو همون جا import کن. اگه قالب ساده است، فایل های فونت رو توی پوشه قالب یا قالب فرزند بذار و با @font-face معرفی شون کن. بعدش font-family رو توی CSS قالب تنظیم کن و لینک فونت خارجی قبلی رو حذف کن.
Roboto با مجوز متن باز منتشر شده و معمولاً استفاده تجاری و همراه کردنش با سایت یا نرم افزار مشکلی نداره. ولی شرط های مجوز رو باید رعایت کنی. قبل از استفاده توی پروژه مهم، متن کامل مجوز رو که همراه بسته هست بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.