كيفية استخدام الخطوط التي تم تنزيلها في WordPress بدون البرنامج المساعد

تعد Google Fonts مصدرًا رائعًا. قبل أن تكون منتشرة على نطاق واسع ، كان إنشاء مواقع الويب التي تستخدم خطوطًا فريدة يمثل ألمًا حقيقيًا. الآن ، على الرغم من بضع نقرات ومقتطف واحد من التعليمات البرمجية ، ينتقل موقع الويب الخاص بك من Helvetic-eh إلى Helvetic-awesome . ولكن ماذا لو لم يكن الخط الذي تحبه جزءًا من عائلة Google Fonts؟ أنت بحاجة إلى معرفة كيفية استخدام الخطوط التي تم تنزيلها لأنك اكتشفت خط محب رائع يتحدث عن روح لحيتك.

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

الآن ، أريد أن أشير إلى أنه يمكنك القيام بذلك عبر مكون إضافي. هناك عدد قليل من المتاح في الريبو. لكن لماذا نريد أن نفعل ذلك؟ أنا من النوع الذي يفضل تجنب استخدام البرنامج المساعد عندما تفعل بضعة أسطر من التعليمات البرمجية نفس الشيء. تتسبب المكونات الإضافية الزائدة في حدوث أطنان من سخام وطلبات HTTP غير الضرورية وإبطاء موقعك.

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

اختيار وتنزيل الخط

أنا من أشد المعجبين بتقارير الخطوط. تحتوي السمات الأنيقة على الكثير من الأشياء التي يمكنك مسحها ضوئيًا لترى ما تريد. لذا اضرب بعضًا من هؤلاء وشاهد ما تريد.

• خطوط الكتابة اليدوية
• الخطوط الرجعية
• خطوط راقية
• خطوط مخطوطة
• خطوط هيبستر
• خطوط ممتعة

بالنسبة لي ، أنا أستخدم خط Aventura من جولة Hipster.

خطوتك الأولى هي العثور على رابط التنزيل للخط وحفظ الملف على جهاز الكمبيوتر الخاص بك. من المحتمل أن يكون ملف .zip يحتوي على تنسيقات ملفات متنوعة. أكثرها شيوعًا هي .ttf (خط تروتايب) أو .otf (خط OpenType).

إنشاء خط ويب (Kinda اختياري ، ولكن ليس حقًا)

يحتوي FontSquirrel على أداة رائعة يمكنك استخدامها للتأكد من عدم ترك أي شخص أو متصفح غير متوافق مع روعة موقعك. نظرًا لأن معظم الخطوط التي تقوم بتنزيلها ستكون متاحة فقط بتنسيق واحد ، فإن أداة FontSquirrel تجعلها غير مقيد بما يوزعه مؤلف الخط. طالما أن لديك حقوق استخدام الخط ، يمكنك التأكد من أنه يعمل مع منتجك / موقعك.

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

يعد FontSquirrel رائعًا أيضًا لأنه يوفر لك CSS المطلوب لاستيرادها إلى موقعك. كيف هذا لسهولة الاستخدام؟ ستقوم فقط بنسخه ولصقه (الذي نتعامل معه أدناه).

تحميل الخط الخاص بك على WordPress

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

إذا كنت لا تعرف معلومات FTP الخاصة بمضيفك ، فتوجه إلى cPanel وابحث ضمن الملفات -> حسابات FTP .

سترى كل حساب FTP للمضيف هناك ، ويجب أن ترى أيضًا ارتباط تكوين عميل FTP بجانب كل حساب.

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

الآن بعد أن قمت بتسجيل الدخول إلى مضيفك عبر FTP ، انتقل إلى مجلد / wp-content لموقعك. لأن هذا محتوى لموقع WordPress الخاص بك ، فلماذا لا تضعه هناك؟ لا تتردد في وضعه في أي مكان ، حتى في / wp-content / uploads . قمت بذلك.

FTP سهل للغاية لتحميل ملفك. ما عليك سوى العثور على ملف الخط الذي قمت بتنزيله واسحبه إلى الجزء السفلي الأيمن في FileZilla. سيبدأ التحميل. لن يستغرق الأمر أكثر من ثانية أو نحو ذلك حتى تراها في الدليل.

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

استخدام الخط الخاص بك مع CSS

يتم الآن تحميل خطك وتحاضنه بأمان في بطانية محتوى wp الدافئة والمريحة. حان الوقت لإضافة استيراد CSS المطلوب إلى قالبك.

توجه إلى دليل القالب الفرعي الخاص بك (أنت تستخدم سمة فرعية ، أليس كذلك؟) في عميل FTP الخاص بك وابحث عن ملف style.css ، وانقر فوقه بزر الماوس الأيمن ، وحدد عرض / تحرير لإحضاره في محرر النصوص الافتراضي الخاص بك.

إذا لم يكن لديك سمة فرعية ، فاستخدم Orbisius Child Theme Creator للقيام بذلك بسرعة فائقة. يمكنك حذف البرنامج المساعد بعد ذلك. احب هذا الشي.

@ font-face

الكود الذي نستخدمه يأتي مباشرة من FontSquirrel (يمكنك كتابة الخاص بك أو نسخ / لصق المثال أدناه) ، وكل ما قمت بتغييره هو مسار تحميل URL لتضمين / wp-content . كل شيء آخر هو ما قدمه منشئ خطوط الويب.

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

بدون @ font-face ، إذا حاولت استدعاء font-family: 'aventurabold'؛ بواسطة CSS ، لن يتمكن موقعك من العثور عليه لأنه لم يتم إخباره أبدًا بمكان الاحتفاظ به.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

احفظ الملف ، وبما أنك فتحته للتحرير من خلال FileZilla ، ستحصل على حوار يسألك عما إذا كنت تريد استبدال الملف الموجود على الخادم. من الواضح أن إجابتك هي نعم.

الآن كل ما عليك فعله هو الانتقال إلى custom.css (أو إذا كنت تستخدم Divi ، Divi -> Theme Options -> Custom CSS في جزء التنقل بلوحة معلومات WP.)

ما عليك سوى إضافة نمط CSS كما تفعل مع أي خط آخر. لقد استبدلت ببساطة "Roboto" و "Exo" Google Fonts التي كنت أستخدمها مع "aventurabold" ، وكانت الأمور جيدة (بفضل استيراد @ font-face أعلاه).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

ثمار عمالنا

هذا ما كان يبدو عليه من قبل:

وهذا ما حدث بعد أن أضفت Aventura إلى CSS:

الصيحة! إنها تعمل! أحسنت! اذهب إلينا!

تبدو جيدة ، فريندو

مثلما قال الكابتن مالكولم رينولدز ذات مرة ، "لقد فعلنا المستحيل ، وهذا يجعلنا أقوياء." حسنًا ، حسنًا ، قد لا يرقى تحميل خط واستيراده عبر CSS إلى تحقيق المستحيل ، لكنك بالتأكيد فعلت شيئًا لا يجرؤ العديد من مستخدمي WordPress على القيام به: إضافة وظائف أساسية بدون مكون إضافي.

وهذا ، يا أصدقائي ، يجعلكم بالفعل أقوياء.

إذن ما هو الخط المفضل لديك لاستخدامه على الويب وهو ليس أحد خطوط Google؟ قل لي في التعليقات!

الصورة المصغرة للمادة 32 بكسل / shutterstock.com