تعد خطوط Google مصدرًا مجانيًا رائعًا لمصممي الويب. في WPBv4 ، بدأنا في استخدام مجموعة خطوط Google الشائعة: Oswald و Lora. لقد سألنا بعض مستخدمينا عن كيفية إضافة خطوط ويب Google في قوالب ووردبريس. إذا كنت تتذكر ، فقد أوضحنا كيفية إضافة خطوط Google في ووردبريس Post Editor . في هذه المقالة ، سنوضح لك كيفية إضافة Google Web Fonts في سمات ووردبريس الخاصة بك بالطريقة الصحيحة ، المحسّنة للأداء.
ابحث عن خطوط الويب من Google التي تعجبك
أول شيء عليك القيام به هو العثور على خط Google الذي تريده. توجه إلى خطوط Google وتصفح المكتبة. عندما تجد الخط الذي تريده ، انقر على زر “الاستخدام السريع” .
استخدام الخطوط سريعًا من Google Fonts
بمجرد النقر فوق زر الاستخدام السريع ، سيتم نقلك إلى صفحة جديدة. قم بالتمرير لأسفل حتى ترى مربع تعليمات الاستخدام مع رمز يمكنك إضافته إلى موقع الويب الخاص بك.
كود تضمين خط Google
سترى أن هناك ثلاث علامات تبويب مختلفة لإضافة الخط إلى موقعك. الطريقة الأولى هي الطريقة القياسية والموصى بها لإضافة خطوط Google إلى موقعك. تستخدم علامة التبويب الثانية طريقةimport CSS ، وتستخدم علامة التبويب الأخيرة طريقة JavaScript.
سنوضح لك كيفية استخدام كل من هذه الطرق وما هي مزاياها وعيوبها.
إضافة Google Web Fonts في ووردبريس Themes
لقد رأينا في الغالب أشخاصًا يستخدمون أول طريقتين.
أسهل طريقة هي فتح ملف style.css الخاص بالقالب الخاص بك ولصق رمز الخطوط الذي حصلت عليه في علامة التبويبimport ، مثل هذا:
@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);يمكنك أيضًا دمج طلبات خط متعددة في طلب واحد. إليك كيف ستفعل ذلك:
@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);هذه الطريقة سهلة للغاية ولكنها ليست أفضل طريقة لإضافة خطوط Google إلى موقع ووردبريس الخاص بك. يؤدي استخدام أسلوبimport إلى حظر التنزيلات المتوازية ، مما يعني أن المتصفح سينتظر انتهاء تنزيل الملف المستورد قبل أن يبدأ تنزيل بقية المحتوى.
إذا كان يجب عليك استخدامimport ، فعليك على الأقل دمج طلبات متعددة في طلب واحد.
أفضل طريقة لإضافة خطوط Google هي باستخدام الطريقة القياسية التي تستخدم طريقة الارتباط بدلاً من طريقة الاستيراد. ما عليك سوى أخذ عنوان URL الخاص بالخط الذي حصلت عليه من الخطوة 1. إذا كنت تضيف خطوطًا متعددة ، فيمكنك دمج الخطين مع | اختلاف الشخصيات. ثم ضع الكود في قسم رأس القالب الخاص بك.
سيكون عليك على الأرجح تعديل ملف header.php الخاص بك ، ولصق الكود التالي فوق ورقة الأنماط الرئيسية الخاصة بك. سيبدو المثال كالتالي:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">الهدف الأساسي هو تقديم طلب الخط في أقرب وقت ممكن. وفقًا لمدونة Google Web Fonts ، إذا كانت هناك علامة نصية قبل إعلان @ font-face ، فلن يقوم Internet Explorer بعرض أي شيء على الصفحة حتى يتم تنزيل ملف الخط.
بمجرد القيام بذلك ، يمكنك ببساطة البدء في استخدامه في ملف CSS الخاص بقالبك مثل هذا:
h1 {
font-family: 'Oswald', Helvetica, Arial, serif;
}الآن هناك الكثير من الأطر موضوع و الموضوعات الأطفال هناك. لا يوصى بتعديل ملفات السمة الرئيسية خاصة إذا كنت تستخدم إطار عمل سمة لأن تغييراتك سيتم تجاوزها في المرة التالية التي تقوم فيها بتحديث هذا الإطار. ستحتاج إلى استخدام الخطافات والمرشحات المقدمة لك بواسطة هذا الموضوع الأصلي أو إطار العمل لإضافة خطوط Google بشكل صحيح في السمات الفرعية الخاصة بك.
وهناك طريقة أخرى لإضافة خطوط Google لموقع وورد الخاص بك هو من خلال enqueuing الخط في موضوع الخاص بك functions.php ملف أو المساعد الموقع محددة .
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );لا تنس استبدال رابط الخط بوصلك الخاص.
بالنسبة لهذه الطريقة ، ستحتاج إلى نسخ الكود في علامة التبويب JavaScript في قسم تعليمات استخدام خطوط Google. يمكنك لصق هذه الشفرة في السمة أو ملف header.php للقالب الفرعي مباشرة بعد علامة <head>.
نصيحتنا الأخيرة حول استخدام Google Web Fonts على موقعك هي عدم تحميل الخطوط التي لن تستخدمها. على سبيل المثال ، إذا كنت تريد فقط الوزن العريض والوزن العادي ، فلا تضف كل الأنماط الأخرى.
نأمل أن تساعدك هذه المقالة في إضافة Google Web Fonts في سمات ووردبريس الخاصة بك بالطريقة الصحيحة ، بحيث يمكن تحميل موقعك بسرعة. قد ترغب أيضًا في الاطلاع على دليلنا حول كيفية إضافة خطوط Typekit في ووردبريس .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
