نمایشگر فونت‌های گوگل

فونت‌های گوگل را جستجو و پیش‌نمایش کنید. فونت مناسب برای پروژه‌های وب خود را پیدا کنید و ببینید که در زمان واقعی چگونه به نظر می‌رسند.

جستجوی فونت

فونت‌های مورد نظر خود را جستجو یا فیلتر کنید.

فقط فونت‌های کره‌ای را نشان بده

دسته

برای شروع پیش‌نمایش، یک فونت انتخاب کنید

📚 راهنمای کامل فونت‌های گوگل

یاد بگیرید چگونه به طور مؤثر از فونت‌های گوگل استفاده کنید

🎨🎨 فونت‌های گوگل چیست؟

فونت‌های گوگل یک سرویس فونت وب رایگان است که توسط گوگل ارائه می‌شود.

بیش از ۱۴۰۰ خانواده فونت منبع باز
مجوز رایگان برای استفاده تجاری
توزیع جهانی از طریق CDN سریع
پشتیبانی از زبان‌ها و سیستم‌های نوشتاری مختلف
بهینه‌سازی شده برای طراحی وب واکنش‌گرا

⚡⚡ نحوه استفاده از فونت‌های وب

۱. استفاده در HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

۲. اعمال در CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 نکات بهینه‌سازی عملکرد

برای جلوگیری از FOIT از font-display: swap استفاده کنید
برای کاهش زمان جستجوی DNS از preconnect استفاده کنید
فقط وزن‌های فونت مورد نیاز را به صورت انتخابی بارگیری کنید
مجموعه کاراکترها را با پارامتر subset محدود کنید
فونت‌های جایگزین محلی را تنظیم کنید

مثال بارگیری بهینه شده:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 تایپوگرافی واکنش‌گرا

تنظیمات برای خوانایی بهینه در دستگاه‌های مختلف:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}

모바일: 16px 이상 권장
태블릿: 18px 이상 권장
데스크톱: 20px 이상 권장

🎯🎯 راهنمای انتخاب فونت

فونت‌های توصیه شده بر اساس کاربرد:

متن اصلی: Noto Sans KR, Spoqa Han Sans
عناوین: Noto Serif KR, Gowun Dodum
کد: Fira Code, JetBrains Mono
تزئینی: Jua, Gamja Flower

معیارهای انتخاب:

سازگاری با هویت برند
خوانایی و دسترسی‌پذیری
محدوده پشتیبانی از چند زبان
عملکرد بارگیری

🔧🔧 استفاده پیشرفته

استفاده از فونت‌های متغیر:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

استفاده از ویژگی‌های سفارشی CSS:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ ملاحظات دسترسی‌پذیری

نسبت کنتراست کافی: WCAG 4.5:1 یا بالاتر
فاصله خط مناسب: ۱.۴ تا ۱.۶ توصیه می‌شود
اندازه فونت خوانا: حداقل ۱۶ پیکسل
مناسب برای افراد مبتلا به نارساخوانی: OpenDyslexic و غیره را در نظر بگیرید

مثال CSS قابل دسترس:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 اشکال‌زدایی و تست

تأیید بارگیری فونت:

فایل‌های فونت را در تب Network ابزارهای توسعه‌دهنده بررسی کنید
فونت‌های اعمال شده واقعی را در سبک‌های Computed بررسی کنید
رفتار font-display را تست کنید

ابزارهای اندازه‌گیری عملکرد:

Google PageSpeed Insights
WebPageTest
بررسی‌های بهینه‌سازی فونت Lighthouse

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;