يعتبر توظيف خط من خطوط جوجل الجميلة سواء خط عربي أو غربي يعطي جمالية إضافية الى المشروع ، لكن هذه الاضافة من الممكن أن تكلف ضررا كبيرا بسرعة تحميل الموقع و بالتالي التأثير على تجربة المستخدم ، هذا المشكل لا يقتصر فقط على خطوط جوجل فقط ،لأن اغلب الاضافات و القوالب التي نستخدمها حاليا تستخدم خطوط خاصة بها .
لذلك و في هذه المقالة سنتعرف على كيفية استضافة هذه الخطوط محليا على السيرفر الخاص بنا لتجنب تحميل هذه الخطوط بشكل يؤثر على سرعة تحميل موقعنا .
أهمية استضافة خطوط جوجل محليا
من الضروري جدا استخدام احد خطوط جوجل او احد انواع الخطوط الاخرى ، و ذلك من اجل تحسين جودة و شكل التصميم و لكي يظهر بشكل جيد ، لكن نتيجة لهذه الخطوة و التي قد يترتب عليها استخدامات غير صحيحة مجموعة من المشاكل ، و أهم هذه المشاكل هي مدة تحميل الصفحة و ارتفاع معدل الارتداد للموقع .
يتم احتساب معدل الارتداد بمجموع زوار الموقع لشهر معين و المدة التي يقضيها كل زائر داخل الموقع ، كلما كانت مدة بقاء الزائر أطول كان معدل الارتداد جيد و هذا بالطبع سيؤثر بشكل إيجابي على ترتيب موقعك.
طريقة استضافة خطوط جوجل محليا
اختيار الخط المناسب للمشروع
قبل كل شيء يجب عليك اختيار نوع الخط المناسب للمشروع الخاص بك عربي او اجنبي ، تحديد الوزن المناسب للمشروع بعد ذلك تحميله من الموقع الرسمي لخطوط جوجل كما هو موضح بالصورة اسفله ،
بعد تحديد نوع الخط المراد استعماله في المشروع ، ما عليك سوى تحميل وزن الخط المناسب لك ، بالنسبة لي كمصمم ويب أفضل استخدام الاوزان المتوسطة 400 و 600 فقط ، كما أوظفها على حسب الاستخدام اضع الوزن المناسب بالمكان المناسب.
تحويل الخط من TTF الى WOFF2 و WOFF
تتم عملية تحويل الخط من الصيغة العادية TTF الى صيغة الويب WOFF ، باستخدام احد مواقع التحويل في حالتنا سنستخدم موقع Transfonter.
كل ما يجب القيام به أثناء عملية التحويل هو رفع الخط المراد تحويله فقط ، بعد ذلك نضغط على تحويل لبدء عملية التحويل . من ثم يمكنك تنزيل الخط على شكل ملف مضغوط بصيغة ZIP.
استضافة الخط
من اجل استضافة الخط على الاستضافة الخاصة بك ، يجب عليك التوجه الى لوحة التحكم الخاصة بك CPANEL من ثم التوجه إلى File Manager ، بعد ذلك تضغط على الملف الرئيسي للموقع الخاص بك ، الذي يكون في أغلب الأحيان اذا كان لديك موقع واحد في Public_Html .
بعد الدخول الى الملف الرئيسي للملف، نتوجه الى ملف اخر مسؤول عن محتوى الموقع و الذي يسمى Wp-Content هنا نقوم بالضغط على كلمة “Folder” من ثم ستنبثق لنا نافذة لإضافة ملف جديد نقوم بإضافة اسم الملف في حالتنا نحن ستكون ” Font “ .
رفع الخط الى ملف Font
بعد إنشاء ملف Font الذي سنقوم برفع الخط اليه ، نضغط على الملف للدخول اليه بعد ذلك نتوجه الى الشريط العلوي و نضغط على ” Upload “ او ” رفع ” ، بعد ذلك نقوم برفع الملف المضغوط الذي قمنا بتنزيله من موقع Transfonter.
بعد رفع الخط سنقوم بعمل Extract للملف ، لتظهر لنا الملفات الموجودة في الصورة التي على اليسار ، بالنسبة للملفات التي يشير اليها السهم الاحمر لا تنفع بإمكانك حذفها ، اما بالنسبة للملف الذي يشير اليه السهم الاخضر فهذا ستقوم بتنزيله و فتحه على احد محررات الأكواد ك Brackets, Code Editor … لأخذ الكود المسؤول عن استدعاء الخط.
استدعاء الخط باستعمال كود CSS
من أجل استدعاء الخط الذي قمنا باستضافته محليا يوفر لنا الموقع المستخدم في تحويل الخط هذا الكود و الذي يوجد بملف Stylesheet.css .
@font-face {
font-family: 'Tajawal';
src: url('https://your-website.com/wp-content/font/Tajawal-Regular.woff2') format('woff2'),
url('Tajawal-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}قم بنسخ الكود الموجود بالملف لديك و بعد ذلك توجه الى صفحة تخصيص القالب ، بعدها ستنزل الى غاية ما تصل الى تنسيقات CSS اضافية ، بعد ذلك تدخل الى هذا القسم و تقوم بلصق الكود.
احرص على اضافة رابط موقعك بشكل صحيح كما هو موضح بالصورة أو قم باستبدال رابط your-site.com الى رابط موقعك .
تطبيق الخط على كافة الموقع
لتطبيق الخط على الموقع فنحن بحاجة الى اضافة بعض اوامر CSS مثل :
body {
font-family: 'Tajawal';
}
p,span,div{
font-family: 'Tajawal';
}
h1,h2,h4,h5,h6{
font-family: 'Tajawal';
}قد لا يكون هذا كاف لتطبيق الخط على كامل الموقع لذا قد تحتاج إلى عمل Inspect لكل عنوان أو Section لم يطبق عليها الخط ، و منه إضافة خاصية “font-family: ‘Tajawal’; “ كما هو موضح أسفله.
و بهذا تكون قد قمت باستضافة الخط الخاص بك محليا دون استعمال اية اضافات أو أكواد غير معروفة ، لكن من الضروري جدا ان يتم استعمال خط واحد بالموقع و ليس اكثر لان هذا سيسبب مشاكل بالأداء.
خلاصة
الخطوط عنصر مهم وضروري للمواقع ، لذا من الضروري معرفة كيفية يمكننا استخدامه بشكل صحيح ، في حالة قمت بتطبيق هذه الخطوة و لازال موقعك بطيء ننصحك بتجربة شركة استضافة اخرى و في هذا الصدد نقترح عليك استخدام شركة HostArmada او FastComet للحصول على أفضل خدمة استضافة سحابية لموقعك .
في حالة واجهت اية مشاكل متعلقة باستضافة خطوط جوجل محليا لموقعك يمكنك التواصل معنا لحل المشكلة .
| السؤال | الجواب |
|---|---|
| هل استضافة خطوط جوجل محليا ضرورية لتحسين سرعة الموقع؟ | نعم ، بكل تأكيد تؤثر عملية استضافة خطوط جوجل محليا على تحسين سرعة موقعك بشكل كبير. |
| هل يمكنني استضافة خطوط جوجل محليا بنفسي فقط؟ | نعم ، يمكنك القيام بهذه العملية بنفسك دون اللجوء الى مطور ويب. |
| هل سأواجه مشكلة أثناء القيام باستضافة خطوط جوجل محليا؟ | من المفترض لا لكن في حالة واجهت أية مشكلة يمكنك مراسلتنا لمساعدتك على حل المشكلة. |
| هل يمكنني استضافة خطوط جوجل محليا عن طريق اضافات وورد بريس؟ | نعم ، بكل تأكيد يمكنك استخدام احد اضافات استضافة خطوط جوجل محليا لكنها ستأخذ جزء من موارد السيرفر نحن في غنا عنها. |
| هل يمكنك تفعيل خاصية استضافة خطوط جوجل محليا فقط بقوالب تدعم هذه الخاصية؟ | نعم ، يمكنك ذلك لكن أفضل القيام بهذه العملية يدويا أفضل. |
