کتابخانه
@fontsource/source-sans-pro یه بسته npm برای میزبانی فونت Source Sans Pro روی سرور یا هاست خودته. فایل های فونت و CSS لازم کنار پروژه قرار می گیرن و سایتت موقع باز شدن دیگه به سرویس بیرونی مثل گوگل فونت وصل نمی شه. برای سایت هایی که سرعت و پایداری براشون مهمه مناسبه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۱٫۵ مگابایت · ۲۸۳ فایل · انتشار
دانلود هفتگی جهانی
۱۴۹٫۶ هزار
هفته ۲۵ مهر تا ۱ آبان۲٫۷٪ کمتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: b03c6eb21167e8f75e916c3c2e740aaaf15a013766302bb68eef173be7111fa9
@fontsource/source-sans-pro یه بسته npm برای فونت Source Sans Pro هست که فایل های لازم رو مرتب و جدا از هم کنار هم می ذاره. مشکلی که حل می کنه ساده است: خیلی از سایت ها فونتشون رو از سرویس های بیرونی لود می کنن. وقتی دسترسی به بیرون از کشور کند بشه یا قطع باشه، یا متن دیر نشون داده می شه یا فونت پیش فرض مرورگر جاش میاد و ظاهر طراحی به هم می ریزه. اگه فایل ها روی هاست خودت باشن، این وابستگی از بین می ره.
Source Sans Pro یه فونت بدون سریف و تمیزه که توی اندازه های کوچک هم راحت خونده می شه. برای رابط کاربری، داشبورد، منو، دکمه ها و متن اصلی سایت های انگلیسی یا دوزبانه انتخاب رایجیه. فایل های فونت توی این بسته بر اساس وزن و استایل جدا شدن، پس لازم نیست همه رو لود کنی. فقط همونی رو وارد پروژه می کنی که توی طراحی استفاده می کنی.
یه نکته مهم برای سایت های ایرانی: این فونت حروف فارسی نداره و فقط خط های لاتین و چند خط دیگه مثل سیریلیک و یونانی رو پوشش می ده. پس برای متن فارسی باید یه فونت فارسی جداگونه کنارش تعریف کنی. رایج ترین کار اینه که Source Sans Pro برای کلمه های انگلیسی، اسم برندها و اعداد لاتین بیاد و فونت فارسی بقیه متن رو بگیره. اگه سایتت کامل فارسیه و هیچ متن لاتینی نداره، این بسته به دردت نمی خوره.
موقع انتخاب چند چیز رو در نظر بگیر. اول اینکه فقط وزن های لازم رو اضافه کن. معمولاً معمولی و ضخیم کافیه. دوم اینکه برای font-display مقدار swap رو امتحان کن تا متن تا آماده شدن فونت نامرئی نمونه. سوم اینکه این خانواده فونت توی منبع اصلی بعدها با اسم جدیدتری ادامه پیدا کرده. برای پروژه تازه ببین کدوم رو می خوای، ولی اگه می خوای ظاهر یه پروژه قدیمی همون بمونه، همین بسته درسته. مجوزش OFL هست و برای سایت شخصی و تجاری آزاده. فقط فایل مجوز رو همراه فونت نگه دار.
نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم در دسترسه. اگه دسترسی به npm یا منابع خارجی مشکل داشت، می تونی همین جا از صفحه بگیریش.
اگه با npm و باندلری مثل webpack یا Vite کار می کنی، مسیر کار کوتاهه. اگه سایتت وردپرسی یا HTML ساده است، فایل ها رو دستی روی هاست می ذاری. توی هر دو حالت می تونی از کد آماده پایین همین صفحه شروع کنی.
نه، این فونت حروف فارسی نداره و فقط لاتین و چند خط دیگه مثل سیریلیک و یونانی رو پوشش می ده. اگه متن فارسی باهاش بنویسی، مرورگر سراغ یه فونت دیگه می ره. بهتره برای فارسی یه فونت جداگونه تعریف کنی و این یکی رو برای متن انگلیسی نگه داری.
توی لینک کردن گوگل فونت، مرورگر بازدیدکننده موقع باز شدن صفحه باید به یه سرور بیرونی وصل بشه. با این بسته فایل ها روی هاست خودته و از دامنه خودت سرو می شن. برای سایت های ایرانی که گاهی دسترسی به بیرون مشکل داره، این روش پایدارتر و قابل پیش بینی تره.
فایل های CSS این بسته بر اساس وزن و استایل جدا شدن. فقط همونی رو وارد پروژه کن که توی طراحی استفاده می کنی، مثلاً معمولی و ضخیم. هر وزن اضافه یعنی یه فایل دیگه برای دانلود. پس هرچی انتخاب هات کمتر باشه، صفحه سبک تر می مونه.
آره، مجوز این فونت OFL هست و استفاده توی پروژه های شخصی و تجاری رو اجازه می ده. شرط اصلی اینه که مجوز رو همراه فونت نگه داری. اگه فونت رو تغییر دادی، حواست به محدودیت اسم اصلی فونت باشه. برای جزئیات دقیق، متن خود مجوز رو بخون.
آره. بسته رو دانلود کن، فایل های فونت و CSS لازم رو توی پوشه قالب یا قالب فرزند آپلود کن و فایل CSS رو با روش استاندارد وردپرس توی سایت لود کن. بعدش font-family رو توی استایل قالب روی این فونت تنظیم کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.