کتابخانه
@fontsource-variable/montserrat یه بسته npm برای میزبانی فونت Montserrat روی سرور خودته. نسخه متغیر فونت رو با فایل های CSS آماده می گیری و بدون وابستگی به سرویس بیرونی، تیتر و متن لاتین سایت یا اپلیکیشنت رو با هر وزنی نشون می دی.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۳۵۶ کیلوبایت· ۱۷ فایل· انتشار
SHA-256: 1d49142dc40c30e813d69be80ef3fa3c9ad21bca284753c3a74859222fe852d5
Montserrat یکی از پرکاربردترین فونت های لاتین توی طراحی وبه. تیتر و لوگوتایپ خیلی از سایت های شرکتی و فروشگاهی باهاش ساخته می شه. بسته @fontsource-variable/montserrat همین فونت رو به شکل یه بسته npm مرتب بهت می ده. فایل های فونت و CSS لازم داخل خود بسته هستن و لازم نیست به سرویس خارجی لینک بدی.
مشکلی که حل می کنه برای ما ایرانی ها کاملا ملموسه. وقتی فونت از یه سرویس بیرونی لود می شه، توی روزهای اینترنت ضعیف یا محدودیت دسترسی ممکنه درخواست فونت کند بشه یا اصلا جواب نگیره. اون موقع مرورگر فونت پیش فرض رو نشون می ده و ظاهر سایت بهم می ریزه. اگه فونت از دامنه خودت سرو بشه، این وابستگی از بین می ره و سایت همیشه شکل یکسانی داره.
نسخه متغیر یعنی به جای چند فایل جدا برای Regular و Bold و بقیه وزن ها، یه فایل کل بازه وزن رو پوشش می ده. هر وزنی بین کمترین و بیشترین مقدار رو می تونی توی CSS بدی. این بسته بیشتر به درد پروژه هایی می خوره که با ابزار build مثل Vite یا webpack یا فریم ورکی مثل React و Next.js کار می کنن. اگه سایت وردپرسی ساده ای داری که مرحله build نداره، استفاده مستقیم از npm راحت نیست و باید فایل ها رو دستی کنار قالبت بذاری.
یه نکته رو یادت نره: Montserrat حروف فارسی نداره و فقط لاتین و چند خط دیگه مثل سیریلیک رو پوشش می ده. برای متن فارسی یه فونت فارسی جدا انتخاب کن و Montserrat رو برای بخش های انگلیسی مثل نام برند، عددهای لاتین یا منو کنارش بذار. توی font-family هم یه فونت جایگزین بذار تا اگه فایل لود نشد، صفحه خراب نشه.
مجوز فونت OFL هست و استفاده تجاری ازش آزاده، البته با رعایت شرایط خود مجوز. نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم در دسترسه، برای وقتی که دسترسی به npm یا منابع خارجی مشکل داره.
کار اصلی فقط وصل کردن CSS فونت به پروژه ست. کد آماده پایین همین صفحه رو هم می تونی مستقیم استفاده کنی. مسیر کلی اینه:
اگه پروژه ات build نداره و مثلا یه قالب وردپرسی ساده داری، فایل های CSS و فونت رو از بسته بردار، کنار قالبت بذار و مسیرشون رو توی CSS درست کن. آخرش صفحه رو تست کن و توی تب Network مرورگر ببین فونت از دامنه خودت لود می شه، نه از جای دیگه.
نه، Montserrat حروف فارسی نداره. اگه باهاش متن فارسی بنویسی، مرورگر می ره سراغ فونت جایگزین. برای فارسی یه فونت فارسی جدا انتخاب کن و Montserrat رو برای نام برند، منوی انگلیسی، عددهای لاتین و بقیه متن های لاتین بذار.
با گوگل فونت، مرورگر فونت رو از سرویس بیرونی می گیره و اگه دسترسی ضعیف باشه یا قطع بشه، فونت لود نمی شه. با این بسته، فایل ها روی سرور خودت هستن و از همون دامنه سرو می شن. روی کش و سرعت کنترل بیشتری داری و به سرویس خارجی وابسته نیستی.
یعنی یه فایل فونت همه وزن ها رو از کم تا زیاد پوشش می ده. به جای چند فایل جدا برای هر وزن، فقط یکی لود می کنی و هر وزن میانی رو هم می تونی با font-weight بدی. اگه توی سایتت چند وزن مختلف استفاده می کنی، معمولا مرتب تر و سبک تره.
بله، ولی اگه قالبت مرحله build نداره، استفاده مستقیم از npm راحت نیست. فایل های CSS و فونت رو از بسته در بیار، توی پوشه قالب یا قالب فرزند بذار و با مسیر درست توی CSS صداشون بزن. اگه با Vite یا webpack کار می کنی، همون ایمپورت معمولی کافیه.
مجوز فونت OFL هست و استفاده تجاری رو اجازه می ده، مثلا توی سایت مشتری یا فروشگاه. فقط باید شرایط خود مجوز رو رعایت کنی. مثلا اگه فونت رو تغییر بدی و منتشرش کنی، قواعد نام گذاری و انتشار مجوز هم اعمال می شه. برای جزئیات، متن کامل مجوز رو بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.