کتابخانه
@fontsource/cairo یه بسته npm برای میزبانی فونت Cairo روی سرور یا هاست خودته. Cairo از فونت های Google Fonts هست و حروف عربی و لاتین رو پوشش می ده. فایل های فونت و CSS لازم توی خود بسته هست، پس سایتت برای نمایش متن به سرور گوگل وصل نمی شه و توی روزهای اینترنت محدود هم درست بالا میاد.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۶۸۳ کیلوبایت · ۸۸ فایل · انتشار
دانلود هفتگی جهانی
۹۵٫۹ هزار
هفته ۲۵ مهر تا ۱ آبان۹٪ بیشتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: f9b08f1651723f31b3c6be1f1800f6488a37928145b918c7641a515076275f32
@fontsource/cairo یه راه ساده برای استفاده از فونت Cairo بدون وابستگی به Google Fonts هست. معمولاً فونت رو با یه تگ link از سرور گوگل می گیرن. از ایران این درخواست گاهی کند جواب می ده و گاهی اصلاً جواب نمی ده. نتیجه اش متنیه که اول با فونت پیش فرض مرورگر نمایش داده می شه، یا کلاً خالی می مونه. این بسته فایل های فونت رو همراه CSS آماده توی یه بسته npm جمع کرده و تو اون ها رو از سرور یا هاست خودت سرو می کنی.
Cairo برای خط عربی و لاتین طراحی شده و وزن های مختلفی داره، از نازک تا خیلی ضخیم. ظاهرش مدرن و تمیزه و برای تیتر، منو، دکمه، داشبورد و بخش های رابط کاربری انتخاب خوبیه. چون حروف فارسی با خط عربی مشترکن، بعضی سایت های فارسی هم ازش استفاده می کنن. ولی یه چیز رو حتماً خودت چک کن: متن واقعی سایتت رو با این فونت بالا بیار و حروف، اعداد و نیم فاصله ها رو ببین. اگه برای متن های طولانی و مقاله ای می خوایش، یه کم بخون و ببین چشمت خسته نمی شه.
این بسته برای پروژه هایی مناسبه که با ابزارهایی مثل Webpack یا Vite ساخته می شن و می خوان فونت توی خروجی نهایی خودشون باشه. اگه سایتت وردپرسیه و قالبش build نداره، باز هم می تونی فایل های CSS و فونت رو روی هاست بذاری و دستی لینک بدی. ولی اگه دنبال فونتی هستی که مخصوص نوشتار فارسی طراحی شده و جزئیات تایپوگرافی فارسی براش اولویت داره، بهتره چند فونت فارسی دیگه رو هم کنارش تست کنی.
چند نکته که زود به کارت می آد. هر وزن فونت یه فایل جداست، پس فقط وزن هایی رو بیار که واقعاً توی طراحی استفاده می کنی. معمولاً یه وزن معمولی و یه وزن ضخیم کافیه. زیرمجموعه ها (subset) هم جدا هستن. اگه سایتت فقط فارسی و انگلیسی داره، سراغ arabic و latin برو. مجوز فونت OFL هست و استفاده توی سایت های شخصی و تجاری آزاده. فقط اگه فایل ها رو جای دیگه ای منتشر کردی، متن مجوز رو هم کنارش نگه دار.
نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم هست. وقتی دسترسی به رجیستری npm یا اینترنت بین الملل مختل می شه، می تونی فایلش رو از همین جا بگیری و روی هاست خودت بذاری.
اگه پروژه ات با npm کار می کنه، بسته رو نصب کن و فقط CSS وزن هایی رو که لازم داری توی فایل اصلی جاوااسکریپت یا استایلت import کن. اگه پروژه ات build نداره، مسیر دوم راحت تره:
توی وردپرس، CSS رو از طریق فایل استایل قالب فرزند یا بخش CSS اضافی قالب اضافه کن تا با به روزرسانی قالب از بین نره. بعد از تغییر، کش سایت و کش مرورگر رو پاک کن. خیلی وقت ها فونت جدید فقط به خاطر کش دیده نمی شه.
Cairo برای خط عربی و لاتین طراحی شده و حروف مشترک با فارسی رو نمایش می ده. ولی فونتی مخصوص تایپوگرافی فارسی نیست. پیش از استفاده روی سایت اصلی، متن واقعی خودت رو با اعداد و علامت ها تست کن و ببین ظاهرش به دردت می خوره یا نه.
توی روش لینک، مرورگر کاربر باید به سرور گوگل وصل بشه. با این بسته، فایل های فونت روی هاست خودت می شینن و از همون جا لود می شن. برای کاربرهای ایرانی معمولاً سریع تر و پایدارتره، مخصوصاً وقتی اینترنت بین الملل مشکل داره.
نه. مجوز فونت OFL هست و استفاده توی سایت ها و پروژه های تجاری آزاده. اگه فایل ها رو همراه پروژه ات منتشر یا توزیع می کنی، متن مجوز رو هم کنارشون بذار. برای اطمینان بیشتر، متن کامل مجوز رو هم یه بار بخون.
نه، و بهتره هم نکنی. هر وزن یه فایل جداست و هر چی بیشتر لود کنی صفحه سنگین تر می شه. معمولاً یه وزن معمولی و یه وزن ضخیم برای تیتر کافیه. فقط وزن هایی رو بیار که توی طراحی سایتت واقعاً استفاده می شن.
صفحه رو باز کن، با F12 ابزار توسعه دهنده رو بیار و برو تب Network. فیلتر Font رو بزن و صفحه رو دوباره بارگذاری کن. اگه نشانی فایل ها مال دامنه خودته، درست کار می کنه. اگه به گوگل اشاره می کنه، هنوز یه لینک قدیمی جایی مونده.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.