فونت های رایگان – سایت های برتر، پیش نمایش های زنده و نحوه استفاده از آنها
منابع قابل اعتماد را برای فونت های رایگان مرور کنید، پیش نمایش های زنده را آزمایش کنید، CSS تمیز را کپی کنید، و روش درست استفاده از فونت های وب را بیاموزید. مجموعههای منبع باز، رایگان برای تجاری و استفاده شخصی گنجانده شده است.
فونت های گوگل
OFLبزرگترین کتابخانه منبع باز با CDN جهانی سریع، زیر مجموعه ها و فونت های متغیر. ایده آل برای وب و برنامه ها. اکثر خانواده ها از مجوز قلم باز SIL استفاده می کنند.
Fontshare (توسط ITF)
رایگانتایپفیسهای با کیفیت بهصورت رایگان توسط Indian Type Foundry ارائه میشوند. خانواده های تمیز، جاسازی آسان CDN، و بسیاری از گزینه های متغیر.
فونت سنجاب
بازرگانی رایگانفهرست راهنمای انتخابی متمرکز بر فونتهای استفاده تجاری رایگان. شامل یک مولد فونت وب برای میزبانی خود است.
لیگ نوع متحرک
OFLریخته گری متن باز کلاسیک با خانواده های جاودانه مانند League Spartan و Raleway. عالی برای برندسازی و سرمقاله.
مخملی
OFLتایپفیسهای منبع باز تجربی با سبکهای نمایش متمایز. ایده آل برای پوستر، فرهنگ و کارهای خلاقانه.
جمعی
OFLانجمن ریخته گری فونت های رایگان با کیفیت بالا را تحت مجوزهای باز منتشر می کند. گزینه های ویرایشی و نمایش قوی.
ریخته گری را باز کنید
OFLفهرست فونت منبع باز با ابزارهای آزمایشی و ارائه طراحی محور. ایده آل برای کشف خانواده های تازه.
1001 فونت
مجوزهای مختلطفهرست بزرگ با فیلترهایی برای استفاده تجاری رایگان. مجوز هر خانواده را بخوانید. بسیاری از آنها فقط برای استفاده شخصی هستند.
دافونت
استفاده شخصیبهترین آرشیو برای پروژه های شخصی و الهام بخش. مجوزها بسیار متفاوت هستند. هر صفحه دانلود را بررسی کنید
فونت های آیکون (قلم عالی، آیکون های متریال، نماد ریمیکس)
طبقات رایگانبرای نمادهای UI با استفاده از خط لوله فونت. سیستمهای آیکون SVG مدرن را در نظر بگیرید، اما فونتهای نماد برای افزودن سریع مفید هستند.
پیش نمایش زنده و قطعه های CSS
فقط محلی - چیزی آپلود نشده استمقایسه ویژگی ها (عکس فوری)
مجوزها بسته به خانواده متفاوت است| سایت | منبع باز | بازرگانی رایگان | فونت های متغیر | CDN/Webfonts | یادداشت ها |
|---|---|---|---|---|---|
| فونت های گوگل | بله | بله* | بله | بله | بزرگترین کتابخانه، CDN سریع |
| Fontshare | مختلط | بله | بسیاری | بله | خانواده های مدرن |
| فونت سنجاب | مختلط | بله* | بعضی ها | ژنراتور | برای استفاده تجاری انتخاب شده است |
| League of Moveable Type | بله | بله | بعضی ها | خود میزبان | کلاسیک های بی انتها |
| مخملی | بله | بله | بعضی ها | خود میزبان | نمایش آزمایشی |
| دافونت | خیر | متفاوت است | تعداد کمی | خیر | عالی برای پروژه های شخصی |
نحوه استفاده از فونت های رایگان در وب
- مجوز را بررسی کنید: OFL و سایر مجوزهای مجاز برای پروژه های تجاری بهترین هستند. برخی از سایت ها فونت های مخصوص استفاده شخصی را فهرست می کنند.
- تحویل را انتخاب کنید: پیوند CDN برای سرعت، یا خود میزبانی با @font-face برای کنترل و حفظ حریم خصوصی
- اگر CLS نگران کننده است، فونت های مهم را برای متن قهرمان خود بارگذاری کنید. پشته های بازگشتی را برای جلوگیری از فلاش تعریف کنید.
- برای کاهش درخواستها و دریافت وزنهای انعطافپذیر، فونتهای متغیر را در صورت موجود بودن ترجیح دهید.
مثال CDN
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>
مثال خود میزبان
@font-face{
font-family: "MyFont";
src: url("/fonts/MyFont-Variable.woff2") format("woff2");
font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
* همیشه مجوز هر خانواده را در سایت منبع تأیید کنید.
سوالات متداول
آیا فونت های گوگل برای استفاده تجاری رایگان هستند؟
اکثر آنها تحت OFL منتشر می شوند و برای استفاده تجاری رایگان هستند. مجوز را در هر صفحه خانواده تأیید کنید.
آیا باید از فونت های نماد استفاده کنم یا از نمادهای SVG؟
آیکون های SVG برای برنامه های مدرن انعطاف پذیرتر هستند. فونت های نماد برای راه اندازی سریع یا خطوط لوله قدیمی مفید باقی می مانند.
آیا فونت های وب روی سرعت سایت تاثیر می گذارند؟
بله. استفاده کنید font-display: swap، در صورت امکان زیر مجموعه قرار دهید و خانواده ها و وزن ها را محدود کنید.
بهترین فونت همه منظوره چیست؟
Inter، Roboto و Source Sans 3 همه کاره هستند. برای سرفصلها با یک سریف مانند Merriweather یا Playfair جفت کنید.