toolsmoah

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

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

جستجوی فونت
فونت‌های مورد نظر خود را جستجو یا فیلتر کنید.
Roboto
sans-serif•18 سبک
Open Sans
sans-serif•12 سبک
Noto Sans JP
sans-serif•9 سبک
Montserrat
sans-serif•18 سبک
Inter
sans-serif•18 سبک
Poppins
sans-serif•18 سبک
Lato
sans-serif•10 سبک
Material Icons
monospace•1 سبک
Roboto Condensed
sans-serif•18 سبک
Roboto Mono
monospace•14 سبک
Roboto
Sans-serif • 18 سبک
سلام! نمایشگر فونت‌های گوگل. روباه قهوه‌ای سریع از روی سگ تنبل می‌پرد. ۱۲۳۴۵۶۷۸۹۰
دریافت کد
کد را برای اعمال فونت‌ها در پروژه‌های وب خود کپی کنید.

کد بالا را در داخل تگ head فایل HTML خود قرار دهید.

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

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

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

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

  • بیش از ۱۴۰۰ خانواده فونت منبع باز
  • مجوز رایگان برای استفاده تجاری
  • توزیع جهانی از طریق 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;

💡💡 نکات عملی

راه‌اندازی پروژه:

  • قوانین فونت را در سیستم طراحی تعریف کنید
  • استراتژی بارگیری فونت را ایجاد کنید
  • پشته فونت جایگزین را پیکربندی کنید
  • نظارت بر عملکرد را تنظیم کنید

نگهداری:

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