إضافة خطوط مخصصة إلى ووردبريس باستخدام Font-Face@ وCSS3

إذا كنت تُصمّم قالبًا جديدًا لووردبريس أو تعدّل قالبًا جاهزًا، فإن الخطوط المُخصّصة ستجدّد منظر قالبك. في حين تأتي متصفحات الإنترنت بخطوط جاهزة افتراضية، وهي التي تستدعيها في ملف style.css، استخدام نفس الخطوط التي يستخدمها الآخرين يبدو مملًا بعض الشيء.

font-face-wp.thumb.png.1bf8f5f5c3dfa3518
لحسن الحظ، بإمكانك إضافة الخط الذي تختاره بسهولة عن طريق قاعدة Font-Face@ في CSS3. كل ما تحتاجه هو رفع الخط إلى خادوم الويب الخاص بك، ثم إضافته إلى قالبك عن طريق بضعة سطور من CSS.

العثور على خط
هناك أماكن عديدة للعثور على خطوط ويب جيدة مجانًا مثل FontSquirrel أو Adobe Edge Web Fonts. فقط تأكد من اختيارك لخط ذي رخصة تلائم احتياجاتك. حيث أن الخطوط المجانية ليست جميعها متاحة للاستخدام التجاري، ولكن يمكنك شراء خطوط بمقابل مادّي للاستخدام التجاري من أماكن عديدة مثل Typekit.
هناك نوعان رئيسيان من الخطوط في اللغة الإنجليزية: serif و sans-serif. تمتلك خطوط serif منحنيات في أطرافها بينما لا تمتلكها خطوط sans-serif.
عندما يقع اختيارك على الخط الجديد، ستحتاج لتحميل ملفه. ضع في اعتبارك أن هناك أنواع مختلفة من ملفات الخطوط وليست كلها متوافقة مع أغلب متصفحات الإنترنت.

إليك مُلخّصا سريعًا عن الأنواع المختلفة للخطوط وصيغ ملفاتها:

(TrueType Font (TTF: متوافق مع إنترنت اكسبلور 9.0 وما يليها، وكروم بداية من الإصدارة 4.0، فيرفكس من الإصدارة 3.5، سافاري من الإصدارة 3.1 وأوبرا من الإصدارة 10.0.
(OpenType Font (OTF: له نفس التوافقيات لخط TrueType.
(Web Open Font Format (WOFF: يدعمه إنترنت إكسبلورر من الإصدارة 9.0 وما يليها، كروم بداية من الإصدارة 5.0، فيرفكس من الإصدارة 3.6، سافاري من الإصدارة 5.1 وأوبرا من الإصدارة 11.1.
(Web Open Font Format 2.0 (WOFF2: مدعوم فقط في كروم من الإصدارة 36.0، فيرفكس من الإصدارة 35.0، وأوبرا من الإصدارة 26.0.
(Embedded Open Type Font (EOT: متاح خصيصًا لإنترنت إكسبلورر 6.0 وما يليه.
صيغة Web Open Font Format هي الصيغة المفضلة نظرًا لأن الخطوط تٌضغط فيها لتستهلك مساحة أقل من الاتّصال المتاح لك وتحتوي على بيانات وصفية إضافية. ولكن للأسف فإنها ليست دائمًا متاحة للتحميل. فإذا وجدت صعوبة بالعثور على هذه الصيغة، يمكنك استخدام صيغ TrueType وOpenType المتاحة بشكل أكبر للتحميل كما أنها اختيارجيد أيضًا.

رفع خطوطك على خادوم الويب
حين تجد الخط الذي تريد استخدامه وتتبع إرشادات مصدر الخط لتحميل الملف، فقد حان الوقت إذن لرفعه إلى خادوم الويب الخاص بك. وقبل أن تفعل ذلك، تذكر أن تحتفظ بنسخة احتياطية من موقعك بالكامل قبل إجراء أي تعديلات.

من المستحسن إضافة الخط إلى المجلد الذي يحوي قالبك، والذي يمكن أن تجده في المسار:

wp-content > themes > your-theme

حيث your-theme هو اسم قالبك. يمكنك أيضًا إذا أردت إضافة مجلد Fonts ليحتوي خطوطك حتى تنظم حاجياتك، خاصة إذا كنت تخطط لإضافة أكثر من خط واحد.

فك ضغط الملف المضغوط وارفع المحتويات إلى مجلد القالب الخاص بك عن طريق لوحة التحكم. عبر النّقر على زر File Manager تحت Files في الصفحة الرئيسية للوحة التحكم. وغالبًا ستظهر لك نافذة منبثقة، فحينها ستختار مكان موقعك وبعدها تضغط زر الذهاب Go. انتقل إلى مجلد القالب الخاص بك واضغط زر الرفع Upload في أعلى الصفحة.

upload-file-cPanel-700x295.thumb.png.787

يمكنك ترك صلاحيات الملف 644 ولن تواجه مشاكل غالبا. ولكن إذا واجهتك مشكلة صلاحية، فجرب حذف الملفات ثم إعادة رفعها مجددا بصلاحيات مختلفة.

اضغط على زر اختيار الملف Choose file في صفحة رفع الملفات واختر ملفات الخط من حاسوبك. عندما تفتحها، فإن عملية الرفع ستبدأ تلقائيًا دون ضغط زر إضافي على هذه الصفحة.
لا يهم المكان الذي تضع فيه ملف الخطوط، بل ستحتاج لتتذكر مساره. وستجده مكتوبًا في صفحة رفع الملفات بالبنط العريض بعد جملة Select files to upload to.

إضافة خطوطك إلى القالب
لإظهار خطوطك المرفوعة في قالبك، ستحتاج لاستدعائها في ملف style.css الخاص بالقالب، حيث يمكنك العثور عليه في:

wp-content > themes > yourtheme

في لوحة التحكم، اختر الملف ثم اضغط زر التعديل في أعلى الصفحة. إذا لم تكن قد منعت النوافذ المنبثقة مسبقًا، ستظهر لك نافذة منبثقة، في هذه الحالة اضغط على Go في الأسفل. انسخ النص البرمجي بالأسفل إلى الملف، ويفضل لصقه في الجزء المُخصّص لاستدعاء الخطوط. تأكد أن هناك سطرًا فاصلًا بين كل جزء من أجزاءئ النّص البرمجي في الملف.

@font-face {
font-family: FontName;
src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf); font-weight: normal;
}
لا تنس استبدال FontName باسم الخط الذي اخترته، وعدّل في الشيفرة البرمجية لتغيير مسار ملفات الخطوط إلى المسار الصحيح. أضف نفس شيفرة CSS مجددًا لتعريف النمط السميك، المائل، والعناوين الرئيسية للخطوط وما شابه، وتأكد من تغيير اسم الخط ومسار الملف بشكل صحيح. وفي النهاية، حدّد كيفية استخدام خطك ببعض النصوص الإضافية من CSS مثل المثال بالأسفل:

p { font-family: FontName; }
في هذا المثال، كل نصوص الفقرات (الموسومة بوسم p) ستستخدم الخط الجديد. حين تنتهي من تعديل النص البرمجي إلى اختياراتك الخاصة وتحفظ الملف، سيظهر الخط الجديد على موقعك.

خاتمة
مع هذه التعليمات، يجب أن تكون قادرًا على إضافة خطوط جديدة إلى القالب الخاص بك دون أي مشاكل. ومع ذلك، هناك العديد من الإضافات التي يمكنها مساعدتك على إضافة خطوط دون الحاجة إلى أي برمجة إذا أردت حلًا أسهل.