کتابخانه
@fontsource/poppins یه بسته npm برای میزبانی خود فونت Poppins روی سایت خودته. به جای گرفتن فونت از سرویس های خارجی، فایل های فونت رو کنار پروژه نگه می داری و فقط وزن ها و زیرمجموعه های لازم رو لود می کنی. برای سایت ها و پنل هایی که ظاهر لاتین مدرن می خوان مناسبه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز OFL-1.1؛ هش هر فایل با منبع بررسی شده است.
۲٫۳ مگابایت· ۱۹۱ فایل· انتشار
SHA-256: 908e6c2646825c0e322ff3e75240ce8a470284fa6597707cc456fb6895136918
@fontsource/poppins فونت Poppins رو توی یه بسته مرتب npm جمع کرده تا بتونی روی سرور یا پروژه خودت میزبانی اش کنی. یعنی به جای اینکه مرورگر کاربر بره سراغ سرویس فونت گوگل، فایل های فونت از همون دامنه سایت خودت لود می شن. برای ما ایرانی ها این مزیت واقعیه، چون دسترسی به سرویس های خارجی گاهی کنده، گاهی قطع و گاهی فقط با فیلتر شکن جواب می ده. فونتی که از هاست خودت لود بشه، مثل بقیه فایل های سایت رفتار می کنه.
Poppins یه فونت سن سریف هندسی با حروف گرد و خوانا و وزن های متنوعه. توی عنوان ها، دکمه ها، منوها، لندینگ پیج ها و داشبوردها زیاد دیده می شه. ولی یه نکته رو از اول جدی بگیر: این فونت برای حروف لاتین (و یه زیرمجموعه برای دیوناگری) طراحی شده و حروف فارسی نداره. اگه متن فارسی رو باهاش بنویسی، مرورگر میره سراغ فونت بعدی توی فهرست. پس برای متن اصلی فارسی یه فونت فارسی جدا کنارش تعریف کن و Poppins رو برای بخش های انگلیسی، اعداد لاتین، برند و عنوان های دوزبانه نگه دار.
موقع انتخاب چند چیز مهمه. Poppins وزن های زیادی داره و هر وزن یه فایل جدا حساب می شه. اگه همه رو وارد کنی، سایتت بی دلیل سنگین می شه. برای اکثر طراحی ها دو یا سه وزن (مثلاً معمولی، متوسط و ضخیم) کافیه. زیرمجموعه ها (subset) هم توی این بسته جدا شدن، پس اگه فقط لاتین لازم داری، بقیه رو لود نکن. فایل ها در قالب های مدرن وب هستن و با ابزار بیلد مثل Vite یا Webpack می تونی مستقیم import شون کنی.
این بسته بیشتر به درد پروژه هایی می خوره که ابزار بیلد دارن، مثل React، Vue، Next.js یا قالب های سفارشی. اگه سایت وردپرسی ساده ای داری و بیلد نداری، می شه فایل های فونت رو توی پوشه قالب گذاشت و با @font-face صداشون زد. مجوز فونت OFL هست؛ معمولاً استفاده تجاری و میزبانی روی سایت خودت آزاده، فقط نباید خود فونت رو جدا بفروشی. قبل از استفاده توی پروژه های حساس، متن کامل مجوز رو یه بار بخون.
نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم هست. وقتی دسترسی به npm یا اینترنت بین الملل مشکل داره، می تونی از همین جا بگیری و توی پروژه ات استفاده کنی.
استفاده از @fontsource/poppins کار پیچیده ای نیست و بیشتر وقتت صرف انتخاب وزن ها می شه. مراحل کلی اینه:
آخرش سایت رو باز کن، توی تب Network مرورگر نگاه کن و مطمئن شو فایل های فونت از دامنه خودت لود می شن، نه از سرویس خارجی. اگه فونت عوض نشد، اول کش مرورگر و کش سایت رو پاک کن.
نه. این فونت برای حروف لاتین و یه زیرمجموعه دیوناگری طراحی شده و گلیف فارسی نداره. اگه متن فارسی رو باهاش بنویسی، مرورگر به فونت بعدی توی فهرست می ره. برای متن فارسی یه فونت فارسی جدا انتخاب کن و Poppins رو برای بخش های انگلیسی نگه دار.
توی روش لینک، مرورگر کاربر باید به سرویس خارجی وصل بشه. توی این بسته، فایل های فونت روی هاست خودت می شینن و همراه سایت لود می شن. برای سایت های ایرانی یعنی وابستگی کمتر به اینترنت بین الملل و کنترل بیشتر روی سرعت و کش.
فقط چندتا. هر وزن یه فایل جدا حساب می شه و وارد کردن همه، حجم دانلود سایت رو بی دلیل بالا می بره. معمولاً یه وزن معمولی، یه متوسط و یه ضخیم برای اکثر طراحی ها کافیه. بقیه رو فقط وقتی لازم شدن اضافه کن.
بله، فقط راهش فرق داره. فایل های فونت رو توی پوشه قالب یا قالب فرزند بذار و با @font-face توی استایل صداشون بزن. اگه قالبت ابزار بیلد داره، import مستقیم از بسته راحت تره و مسیرها رو خودش مرتب می کنه.
مجوز OFL معمولاً اجازه استفاده تجاری و میزبانی روی سایت رو می ده. شرط اصلی اینه که خود فونت رو به تنهایی نفروشی و شرایط مجوز رو رعایت کنی. برای پروژه های حساس، متن کامل مجوز رو یه بار بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.