يرغب الكثير في تغيير الخطوط في الووردبريس , مثل اسم العنوان و المحتوى من أجل تنسيق القالب و إعطاؤه منظر جذاب وجميل , و من الجدير بالذكر أيضا أن قوالب ووردبريس جميعها قابلة لتركيب الخط الذي تريده ولا تتعارض مع أي نوع من الخطوط
في هذا الدليل سنشرح لكم طريقتين من أجل تغيير الخطوط في الووردبريس بشكل مبسط
الخطوط المحلية وكيفية استخدامها
العديد من القوالب في ووردبريس تدعم خاصية تغير الخطوط التلقائية ولكن في أغلب الأحيان تكون الخطوط لمحتوى انجليزي ولا تصلح للمحتوى العربي , قبل أن نتعرف على طريقة تغيير الخطوط في ووردبريس عليك أولا معرفة صيغ الخطوط المقبول وهي:
- WOFF / WOFF2: هي اختصار ( Web Open Font Format ) قامت بإنشائها شركة موزيلا بالتعاون مع شركات أخرى، وتعتبر هذه الصيغة الأكثر استخدماً عبر الإنترنت لسرعة تحمليها.
- SVG / SVGZ: هي اختصار (Scalable Vector Graphics )، يعتبر هذا النوع من الخطوط الأكثر سهولة ومرونة في الإستخدام ومدعوم بالدرجة الأولى على متصفح سفاري للأيفون وغير مدعوم للمتصفحات الباقية كالكروم وفايرفوكس الخ ..
- EOT : اختصار ( Embedded Open Type )، تمّ تصميم هذه الصيغة بواسطة شركة مايكروسوفت بإستخدام خصائص الـ @font-face ولا تعمل إلا على متصفح إكسبلور وما دون ذلك
- OTF / TTF: اختصار ( OpenType Font &TrueType Font )، يهتمّ العديد من المصممين بهذا النوع من الخطوط حيثُ يقومون بتكوين النوع WOFF من خلاله بكل يُسر وسهولة من أجل الإستخدام عبر الويب.
بعد أن تعرفنا على الصيغ الهامّة في تكوين الخطوط التي نريد استخدامها سنتوجه الان للتطبيق و البدء بإختيار الخطوط وتطبيقها على قالب Twenty Fifteen الافتراضي والذي يكون موجود مسبقاً عند تنصيبك لملفات الووردبريس.
1. تغيير الخطوط في الووردبريس بشكل يدوي
أولا: قم بإنشاء مُجلّد جديد بإسم fonts ضمن مجلدات القالب.

ثانياً: بعد ذلك قم بتحميل الخط الذي تريده داخل المجلد كما هو موضح بالصورة التالية

ثالثا: بعد ذلك قم بفتح ملف style.css الخاص بالقالب.

الأن سنعمل على الخطوط التي قمنا بوضعها يدوياً داخل مُجلّد fonts بإستخدام الصيغ الموجودة بالأعلى، و سنوظف الخط
DroidKufi-Regular.woff ضمن ملف القالب style.css ونقوم بإستخدامه على ‘عنوان التدوينة ‘ للقالب.
و بالتالي عن طريق إدخال الكود في ملف الستايل Style.css والذي عن طريقه نخبر القالب بتوفر الخط:
1 2 3 4 5 | @font-face { font-family: 'MyFontDroidKufi'; src: url('fonts/DroidKufi-Regular.woff') format('woff'); } |
لك الحرية في تغيير التسمية MyFontDroidKufi ما بين علامة التنصيص ، و لكن يجب عليك الإحتفاظ به لإستخدمه في النقاط
المرغوب إضافة الخط إليها أو تعديلها ، و أيضا هذا الكود والنوع من الخطوط يعمل على متصفحات فايرفوكس، كروم، اكسبلور، و سفاري
بعد ذلك سنقوم بتعديل “خط ” عنوان التدوينة في القالب الموجود بهذه الصورة

و بالبحث داخل ملف style.css عن الكود الخاص بالترويسة أو بإستخدام خاصية Inspect elements في المتصحف والضغط على
العنوان الذي نريد تغيره سيظهر لنا الـ Css الخاص فيه كالتالي:
1 2 3 4 5 6 7 | .entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; } |
بعد ذلك إضافة السطر التالي :
1 | font-family:'MyFontDroidKufi'; |
لكي تصبح النتيجة :
1 2 3 4 5 6 7 | .entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; font-family:'MyFontDroidKufi'; } |
بعد ذلك قم بحفظ الملف الآن ثمّ توجّه للمتصفح وشاهد عنوان التدوينة , و بهذا تكون قد أتممت عملية تغيير الخطوط في الووردبريس بنجاح
كذلك نفس الألية تنطبق على بقية الصيغ، و لكن يفضل أن يكون الخط بجميع الصيغ، لماذا؟، لكي يعمل على المتصفحات بسهولة و مرونة وذلك بإستخدام الكود التالي:
1 2 3 4 5 6 7 8 9 | @font-face { font-family: 'MyFontDroidKufi'; src: url('fonts/DroidKufi-Regular.eot'); /* متوافق مع اكسبلور 9 */ src: url('fonts/DroidKufi-Regular.eot?#iefix') format('embedded-opentype'), /*متوافق مع اكسبلور 6 + 7 */ url('fonts/DroidKufi-Regular.woff2') format('woff2'), /* متوافق مع المتصفحات الحديثة*/ url('fonts/DroidKufi-Regular.woff') format('woff'), /* متوافق مع المتصفحات الحديثة*/ url('fonts/DroidKufi-Regular.ttf') format('truetype'), /*متوافق مع متصفح سفاري، وأندوريد، وأيفون*/ url('fonts/DroidKufi-Regular.svg#svgFontName') format('svg'); /* متوافق مع أيفون */ } |
و إستخدام الطريقة السابقة تماما بإضافة الكود الموجود بالأعلى واستخدامه مع العناوين والرؤس الخ…
للتحويل من ttf إلى woff استخدم أداة ttf to woff converter.
تغيير الخطوط في الووردبريس من خلال الخطوط المُخزنة على الويب مثل جوجل
تُعتبر هذه الطريقة أيضا الأسرع والأسهل في الإستخدام، و ذلك لضمان سرعة فائقة في التحميل .. سنعتمد في هذه الطريقة إستخدام Google Fonts | Early Access والتي ستُعطينا كود جاهز لإضافته داخل ملف style.css و إستدعاء دالة الخط ، على سبيل المثال سنقوم بإختيار الخط التالي:

في الصورة يُبين لنا رابط الإستدعاء ( Link ) وطريقة الإستخدام للخط، وسننفذ ذلك بفتح ملف style.css الخاص بالقالب:
ثمّ وضع الرابط الخاص بالخط في منطقة المستطيل الأحمر، الآن يمكنك استخدام كود Example الموجود في الصورة السابقة بأيّ
مكان تريد , على سبيل المثال “عنوان التدوينة” بنفس الطريقة الأولى ليصبح الكود كالتالي :
1 2 3 4 5 6 7 | .entry-title { font-size: 39px; font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; font-family: 'Amiri', serif; } |
أخيرا يمكنك اختيار الطريقة التي تناسبك وتتلائم مع موقعك. نتمنى أن يكون هذا الدليل قد ساعدك في فهم ألية تغيير الخطوط في الووردبريس
انظر أيضا: