ما هو ملف WOFF2؟
WOFF2 (صيغة خطوط الويب المفتوحة 2.0) هي خليفة صيغة WOFF الأصلية، طورتها جوجل وصارت توصية W3C عام 2018. تستبدل ضغط zlib بخوارزمية Brotli من جوجل وتطبّق تحويلات مسبقة خاصة بالخطوط قبل الضغط، مما ينتج ملفات خطوط أصغر بنسبة 30% من WOFF و50-60% من TTF/OTF الخام.
WOFF2 هي الصيغة المفضلة والقياسية لتوصيل خطوط الويب اليوم. تدعمها جميع المتصفحات الحديثة (كروم وفايرفوكس وسفاري وإيدج وأوبرا) التي تغطي أكثر من 95% من مستخدمي الويب العالميين. Google Fonts يقدّم جميع الخطوط بصيغة WOFF2 افتراضياً.
كيفية فتح ملفات WOFF2
- جميع المتصفحات الحديثة — عرض أصلي عبر CSS
@font-face - FontForge (ويندوز، ماك، لينكس) — محرر خطوط مجاني مع دعم WOFF2
- Google Fonts (ويب) — أكبر مكتبة خطوط WOFF2 في العالم
- FontDrop (ويب) — عارض خطوط عبر الإنترنت وفاحص تغطية Unicode
المواصفات التقنية
| الخاصية | القيمة |
|---|---|
| الضغط | Brotli (مع تحويلات خاصة بالخطوط) |
| تقليل الحجم | ~50-60% أصغر من TTF، ~30% أصغر من WOFF |
| معيار W3C | توصية W3C (2018) |
| بايتات سحرية | 77 4F 46 32 (أي wOF2 بـ ASCII) |
| نوع MIME | font/woff2 |
| دعم المتصفحات | جميع المتصفحات الحديثة (كروم 36+، فايرفوكس 35+، سفاري 10+، إيدج 14+) |
الاستخدامات الشائعة
- خطوط الويب: الصيغة المثلى لتقديم الخطوط المخصصة على المواقع
- المواقع ذات الأداء الحرج: يُحسّن حجم WOFF2 الصغير مباشرة نتائج Core Web Vitals
- Google Fonts: صيغة التسليم الافتراضية منذ عام 2016
- الخطوط المستضافة ذاتياً: استضافة متوافقة مع GDPR دون توجيه الطلبات إلى خوادم جوجل
استخدام WOFF2 في CSS
/* تحميل الخط الحديث الأمثل */
@font-face {
font-family: 'مفتوحة';
src: url('/fonts/cairo-regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
/* خط متغير (نطاق الأوزان كاملاً في ملف واحد) */
@font-face {
font-family: 'مفتوحة';
src: url('/fonts/cairo-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}WOFF2 والخطوط المتغيرة
الخطوط المتغيرة (OpenType 1.8) تحزم النطاق الكامل من الأوزان والعروض في ملف واحد. مجتمعةً مع ضغط WOFF2، كثيراً ما يحل ملف خط متغير واحد محل 4-8 ملفات وزن ثابتة منفصلة مع صغر حجمه عن ملفين فقط منها.
التحميل المسبق للأداء
<link rel="preload" href="/fonts/cairo.woff2" as="font" type="font/woff2" crossorigin>هذا يخبر المتصفح بالبدء في تنزيل ملف الخط فوراً، قبل تحليل CSS — مما يزيل تأخير الخط الذي يسبب تحولات التخطيط وفترات النص غير المرئي.