کتابخانه
@fontsource/roboto یه بسته npm برای میزبانی خودت از فونت Roboto گوگله. به جای لود کردن فونت از سرویس های خارجی، فایل های فونت رو کنار پروژه و روی هاست خودت نگه می داری. اگه سایتت متن لاتین داره و نمی خوای به اینترنت بین الملل وابسته باشه، انتخاب خوبیه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۴٫۲ مگابایت· ۵۲۷ فایل· انتشار
SHA-256: d18766bbcd044648f7a6cf0ed32f7f9f709648230f907d84fce25d826d648ef1
Roboto یکی از پرکاربردترین فونت های بدون سریفه که گوگل طراحی کرده. ظاهرش ساده و خواناست و هم برای رابط کاربری خوب جواب می ده، هم برای متن های بلند. بسته @fontsource/roboto همین فونت رو با فایل های آماده و CSS مربوطش بسته بندی کرده. با npm نصبش می کنی و فونت از روی سرور خودت به کاربرها می رسه، بدون هیچ لینکی به سرویس بیرونی.
مشکلی که حل می کنه برای سایت های ایرانی کاملاً ملموسه. وقتی فونت از یه سرویس خارجی لود بشه و اتصال بین المللی کند یا قطع باشه، فونت دیر میاد. نتیجه اش یا فونت پیش فرض مرورگره یا چند لحظه متن رو نمی بینی. اگه فایل ها کنار خود سایت باشن، این وابستگی از بین می ره. کنترل هم دست خودته: وزن ها و زیرمجموعه حروفی که لود می شه رو خودت انتخاب می کنی.
یه نکته مهم قبل از نصب: Roboto حروف فارسی نداره. اگه متن اصلی سایتت فارسیه، این بسته جای فونت فارسی رو نمی گیره. به درد جایی می خوره که متن لاتین داری، مثل اسم برند، عنوان های انگلیسی، عددهای لاتین، پنل مدیریت انگلیسی یا اپلیکیشن دو زبانه. بهترین حالت اینه که یه فونت فارسی جدا انتخاب کنی و Roboto رو کنارش برای بخش های لاتین بذاری.
موقع استفاده حواست به حجم باشه. هر وزن و هر حالت، مثل معمولی یا ایتالیک، فایل جدا داره. بیشتر سایت ها با دو وزن معمولی و بولد و زیرمجموعه لاتین کارشون راه می افته. هر چی کمتر لود کنی، صفحه سبک تر می مونه. مجوز بسته OFL هست که معمولاً استفاده و توزیع فونت رو در پروژه های مختلف اجازه می ده، ولی متن مجوز رو یه بار بخون و همراه پروژه نگه دار.
نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم در دسترسه. یعنی حتی وقتی دسترسی به registry خارجی npm سخت شده، می تونی فایل ها رو از همین صفحه بگیری و روی هاست خودت بذاری.
راه استفاده به نوع پروژه ات بستگی داره. اگه با ابزار بیلد مثل Vite یا webpack کار می کنی، کار راحت تره. اگه قالب وردپرسی معمولی یا یه صفحه ساده داری، باید فایل ها رو دستی کنار سایت بذاری.
توی لینک کردن، مرورگر فونت رو از سرور یه سرویس بیرونی می گیره. توی @fontsource/roboto خود فایل های فونت کنار سایتت هستن و از سرور خودت می رسن. یعنی وقتی اینترنت بین الملل مشکل داره، فونت هم بدون مشکل لود می شه و صفحه منتظر جای دیگه نمی مونه.
نه، Roboto حروف فارسی نداره. اگه متن فارسی رو با این فونت بنویسی، مرورگر خودش یه فونت دیگه جایگزین می کنه و ظاهر متن یکدست نمی شه. برای فارسی یه فونت فارسی جدا انتخاب کن و Roboto رو فقط برای اسم برند، عددها و متن انگلیسی بذار.
نه، و نباید هم بکنی. هر وزن فایل جدا داره و لود کردن همه شون صفحه رو بی دلیل سنگین می کنه. معمولاً وزن معمولی و بولد برای بیشتر سایت ها کافیه. اگه جایی وزن نازک یا خیلی ضخیم لازم شد، فقط همون وزن رو اضافه کن.
مجوز این بسته OFL هست که معمولاً استفاده در پروژه های تجاری رو هم اجازه می ده. با این حال بهتره متن کامل مجوز رو بخونی و همراه پروژه نگه داری، مخصوصاً اگه می خوای فایل های فونت رو تغییر بدی یا جدا توزیع کنی. اگه شرایط پروژه ات خاصه، قبل از انتشار یه بار دوباره بررسی کن.
آره. لازم نیست حتماً npm داشته باشی. فایل های بسته رو روی هاست آپلود کن، فایل CSS رو توی قالب یا با کد آماده پایین همین صفحه به سایت اضافه کن و بعدش font-family رو توی استایل ها تنظیم کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.