عارض خطوط جوجل

ابحث عن خطوط جوجل وعاينها. اعثر على الخط المثالي لمشاريع الويب الخاصة بك وشاهد كيف تبدو في الوقت الفعلي.

البحث عن الخطوط

ابحث عن الخطوط التي تريدها أو قم بتصفيتها.

إظهار الخطوط الكورية فقط

الفئة

اختر خطًا لبدء المعاينة

📚 دليل خطوط جوجل الكامل

تعلم كيفية استخدام خطوط جوجل بفعالية

🎨🎨 ما هي خطوط جوجل؟

خطوط جوجل هي خدمة خطوط ويب مجانية تقدمها جوجل.

أكثر من 1400 عائلة خطوط مفتوحة المصدر
ترخيص مجاني للاستخدام التجاري
توزيع عالمي عبر شبكة CDN سريعة
دعم للغات وأنظمة الكتابة المختلفة
محسّنة لتصميم الويب المتجاوب

⚡⚡ كيفية استخدام خطوط الويب

1. الاستخدام في 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">

2. التطبيق في CSS

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

🚀🚀 نصائح لتحسين الأداء

استخدم font-display: swap لمنع FOIT
استخدم preconnect لتقليل وقت البحث عن DNS
قم بتحميل الأوزان المطلوبة فقط بشكل انتقائي
حدد مجموعات الأحرف باستخدام معلمة 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 أو أعلى
تباعد أسطر مناسب: يوصى بـ 1.4 ~ 1.6
حجم خط قابل للقراءة: 16 بكسل كحد أدنى
صديق لعسر القراءة: ضع في اعتبارك OpenDyslexic وما إلى ذلك.

مثال على CSS يمكن الوصول إليه:

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

🔍🔍 تصحيح الأخطاء والاختبار

التحقق من تحميل الخط:

تحقق من ملفات الخطوط في علامة تبويب الشبكة في أدوات المطور
تحقق من الخطوط المطبقة الفعلية في الأنماط المحسوبة
اختبر سلوك font-display

أدوات قياس الأداء:

Google PageSpeed Insights
WebPageTest
فحوصات تحسين الخطوط في Lighthouse

폰트 fallback 테스트:

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