کتابخانه
@fontsource-variable/roboto-condensed یه بسته npm از پروژه Fontsource هست که فونت Roboto Condensed رو به شکل variable تو پروژه ات می ذاره و از سرور خودت سرو می کنه. دیگه به Google Fonts وصل نیستی و با یه بسته، همه وزن های این فونت باریک و خوانا رو برای عنوان ها، جدول ها و منوها داری.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۴۳۱ کیلوبایت· ۲۱ فایل· انتشار
SHA-256: c9bf014c8ede0efc54a440070fda726108b6282c1a917f6410c087e8ef38f9f0
فونت های گوگل معمولا با یه لینک به سرویس Google Fonts به سایت اضافه می شن. تو شرایط ایران این روش گاهی کند می شه یا اصلا جواب نمی ده، مخصوصا وقتی اینترنت بین الملل مشکل داره. @fontsource-variable/roboto-condensed برای همین موقع ها به درد می خوره. Fontsource فونت های متن باز رو به شکل بسته npm درمیاره و این بسته، Roboto Condensed رو با فایل هاش می ذاره کنار بقیه فایل های سایتت. فونت از سرور خودت لود می شه و هیچ درخواستی به بیرون نمی ره.
Roboto Condensed نسخه باریک تر خانواده Roboto هست. جاهایی که فضا کمه و می خوای متن فشرده ولی تمیز بمونه، خیلی خوب جواب می ده: عنوان بخش ها، منوی بالای سایت، جدول قیمت، داشبورد مدیریت یا کارت محصول. نسخه variable یعنی به جای یه فایل جدا برای هر وزن، یه فایل کل بازه وزن رو پوشش می ده. پس می تونی هر وزنی بین کمترین و بیشترین مقدار رو بذاری، نه فقط معمولی و ضخیم.
یه نکته رو قبل از انتخاب جدی بگیر: این فونت حروف فارسی نداره. برای متن اصلی یه سایت فارسی تنها انتخابت نباشه. جاهایی که لاتین داری، مثل نام برند، کد محصول، عدد و واحدهای لاتین یا بخش انگلیسی سایت، عالیه. برای متن فارسی یه فونت فارسی جدا انتخاب کن و این رو کنارش بذار.
یه محدودیت دیگه هم هست. این بسته برای پروژه هایی راحته که با npm و یه ابزار بیلد مثل Vite یا webpack کار می کنن. اگه قالب وردپرسیت ساده و بدون بیلده، باید فایل های CSS و فونت رو دستی کپی کنی و مسیرشون رو درست بنویسی. اگه هم به مرورگرهای خیلی قدیمی نیاز داری، Fontsource نسخه غیر variable هم داره که باید جدا نگاهش کنی.
مجوز فونت OFL هست (SIL Open Font License) و استفاده تو پروژه های شخصی و تجاری رو اجازه می ده. نسخه های رسمی و بدون تغییر این بسته تو مخزن داخلی ما هم هست، پس اگه npm یا اینترنت بین الملل دم دستت نبود، می تونی از همین جا برداری.
کار با این بسته ساده ست، فقط ترتیب قدم ها مهمه. کد آماده پایین همین صفحه هست، پس اینجا فقط مسیر کلی رو می گیم:
آخر کار تب Network مرورگر رو باز کن و ببین فایل فونت از دامنه خودت لود می شه یا نه. اگه از جای دیگه می یاد، هنوز یه جای کار به سرویس بیرونی وصله. اگه هم فونت اعمال نشد، اول اسم خانواده تو CSS رو چک کن، چون غلط تایپی تو اسمش رایج ترین دلیله.
نه. این فونت برای حروف لاتین و چند خط دیگه طراحی شده و حروف فارسی نداره. اگه متن فارسی باهاش بیاد، مرورگر می ره سراغ فونت جایگزین و ظاهر متن به هم می ریزه. برای فارسی یه فونت فارسی جدا انتخاب کن و این رو فقط برای متن انگلیسی، عدد لاتین و نام برند بذار.
نسخه معمولی برای هر وزن یه فایل جدا داره. نسخه variable کل بازه وزن رو تو یه فایل نگه می داره و می تونی وزن های بینابینی رو هم انتخاب کنی. وقتی چند وزن لازم داری، معمولا تعداد فایل ها کمتر می شه و کنترل بیشتری روی ظاهر متن داری.
برای راحت ترین حالت، آره. با npm و یه ابزار بیلد، import خیلی ساده انجام می شه. ولی اگه سایتت بیلد نداره، می تونی فایل های CSS و فونت رو دستی روی هاست بذاری و تو قالب بهشون لینک بدی. فقط مسیر فایل ها باید دقیق باشه.
این فونت با مجوز OFL منتشر شده که استفاده تجاری رو اجازه می ده. استفاده معمولی تو وب سایت مشکلی نداره. فقط اگه می خوای فونت رو تغییر بدی یا فایل هاش رو جدا پخش کنی، متن کامل مجوز رو بخون، چون شرط هایی داره.
چون وقتی فونت کنار فایل های خود سایتت باشه، به سرویس بیرونی وابسته نیستی. وقتی ارتباط با سرویس های خارجی کند یا قطع می شه، سایتت با فونت پیش فرض مرورگر بالا نمیاد و ظاهرش به هم نمی ریزه. سرعت بارگذاری هم معمولا قابل پیش بینی تر می شه.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.