کتابخانه
@fontsource-variable/inter یه بسته npm برای میزبانی فونت Inter روی هاست خودته، به شکل فونت متغیر (variable). به جای لود فونت از یه سرویس بیرونی، فایل های فونت رو کنار پروژه نگه می داری. برای سایت ها و رابط هایی که متن لاتین، عدد، دکمه و منوی تمیز می خوان مناسبه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۱٫۸ مگابایت· ۵۳ فایل· انتشار
SHA-256: b18a8ac2834206f36bf07f710df6f8bba30164ae242bfa290d1221e939dfb6c5
وقتی فونت رو از یه سرویس بیرونی لود می کنی، سایتت برای نمایش درست به یه درخواست اضافه به دامنه ای دیگه وابسته می شه. برای سایت های ایرانی این وابستگی جدی تره. توی روزهایی که اینترنت بین الملل مشکل داره، ممکنه فونت دیر بیاد یا اصلا نیاد و صفحه با یه فونت پیش فرض به هم ریخته نمایش داده بشه. @fontsource-variable/inter همین مشکل رو حل می کنه. فونت Inter رو توی یه بسته npm مرتب بهت می ده تا فایل ها از همون هاست خودت سرو بشن.
اسم بسته یه نکته مهم داره: variable. یعنی به جای یه فایل جدا برای هر وزن (نازک، معمولی، نیمه ضخیم، ضخیم)، یه فایل فونت متغیر داری که محور وزن رو پوشش می ده. اگه توی طراحی چند وزن مختلف استفاده می کنی، مدیریتش خیلی ساده تر می شه. ولی اگه فقط یک یا دو وزن ثابت لازم داری، بسته های معمولی Fontsource ممکنه سبک تر باشن. قبل از تصمیم، حجم نهایی صفحه رو توی تب Network مرورگر بسنج.
یه نکته مهم برای مخاطب ایرانی: Inter حروف و ارقام فارسی نداره، پس برای متن فارسی روش حساب نکن. اگه سایتت فارسیه، فونت اصلی متن باید یه فونت فارسی باشه. Inter رو برای بخش های انگلیسی، اسم برند، عدد لاتین، پنل مدیریت دو زبانه یا داشبوردهای فنی بذار. توی font-family هم ترتیب فونت ها رو درست بنویس تا هر زبان با فونت خودش نمایش داده بشه.
این بسته بیشتر به درد توسعه دهنده هایی می خوره که با Vite، webpack، Next.js یا ابزار بیلد مشابه کار می کنن و فونت رو مستقیم توی کد ایمپورت می کنن. توی وردپرس هم اگه قالب سفارشی با فرایند بیلد داری، همین مسیر جواب می ده. اگه بیلد نداری، فایل های CSS و فونت رو توی پوشه قالب یا افزونه بذار و با enqueue به صفحه اضافه کن. مجوز بسته OFL هست و برای استفاده توی سایت ها آزاده، ولی یه بار شرایطش رو بخون، مخصوصا اگه می خوای فایل فونت رو توی محصول دیگه ای بسته بندی کنی.
نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم در دسترسه. روزهایی که دسترسی به npm یا CDN ها کند می شه، می تونی از همین جا برداری و روی هاست یا سرور خودت استفاده کنی.
کار با این بسته چند قدم ساده داره. اول مطمئن شو که واقعا به Inter نیاز داری، یعنی بخش های لاتین یا عددی که می خوای باهاش نمایش بدی.
اگه فونت اعمال نشد، اول مسیر فایل ها و کش مرورگر رو چک کن.
نه، Inter حروف و ارقام فارسی نداره. اگه سایتت فارسیه، یه فونت فارسی برای متن اصلی انتخاب کن و Inter رو فقط برای بخش های انگلیسی، عدد لاتین یا اسم برند کنارش بذار. توی font-family هم هر دو فونت رو به ترتیب بنویس.
بسته variable یه فایل متغیر داره که همه وزن ها رو با همون یه فایل پوشش می ده. بسته معمولی برای هر وزن فایل جدا داره. اگه چند وزن لازم داری، variable راحت تره. ولی اگه فقط یه وزن می خوای، بسته معمولی ممکنه سبک تر باشه.
درسته. فایل های فونت همراه بسته نصب می شن و از هاست خودت سرو می شن، نه از یه سرویس بیرونی. برای سایت هایی که توی روزهای محدودیت اینترنت بین الملل باید پایدار بمونن، این مزیت واقعیه. فقط بعد از انتشار، مسیر فایل ها رو تست کن.
بله. فایل CSS و فونت های بسته رو توی پوشه قالب یا افزونه بذار و با enqueue به صفحه اضافه کن. فقط حواست باشه مسیر فایل های فونت توی CSS درست باشه، وگرنه مرورگر فونت رو پیدا نمی کنه. بعدش صفحه رو توی مرورگر باز کن و توی تب Network ببین فایل فونت بدون خطا لود می شه.
به طور کلی OFL برای استفاده توی سایت ها و پروژه های تجاری آزاده. ولی شرایطی داره، مثل محدودیت برای فروش خود فونت به تنهایی. اگه قراره فایل فونت رو توی یه محصول دیگه بسته بندی و توزیع کنی، متن مجوز رو دقیق بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.