دليل تفصيلي حول استضافة الخطوط المحلية في وورد بريس

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

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

ما هي خطوط الويب؟

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

قراءة مقترحة: كيفية تغيير الخط في وورد بريس .

خطوط الويب الآمنة هي الخطوط المثبتة مسبقًا على الجهاز أو نظام التشغيل. تتضمن بعض أمثلة الخطوط الآمنة للويب Arial و Times New Roman و Courier New بالإضافة إلى مجموعات الخطوط العامة مثل serif و sans-serif (انظر الخطوط الحديثة ) و monospace. هذه هي الخطوط التي رأيتها لسنوات عديدة. شاهد قائمة كاملة بخطوط الويب الآمنة .

خطوط الويب هي خطوط لم يتم تثبيتها مسبقًا على الجهاز ويجب تنزيلها بواسطة مستعرض المستخدم قبل عرضها. تتضمن بعض أمثلة خطوط الويب خط Google Open Sans و Roboto ، بالإضافة إلى خط Proxima Nova الشهير من Adobe Fonts.

Google Fonts هو دليل خطوط مفتوح المصدر أصبح مستخدمًا على نطاق واسع خلال العامين الماضيين. وفقًا لـ BuiltWith ، يستخدم أكثر من 45٪ من أفضل 10000 موقع ويب خطوط Google على مواقع الويب الخاصة بهم. وإذا نظرنا إلى تحليلات خطوط Google ، يمكننا أن نرى أن لديهم أكثر من 17 كوادريليون مشاهدة. هذا كثير! Open Sans و Roboto هما أكثر عائلتين للخطوط استخدامًا ، حيث شهد Roboto نموًا هائلاً بنسبة 77٪ في العام الماضي. لدينا منشور حول أفضل خطوط Google ، تأكد من إلقاء نظرة:  15 من أفضل خطوط Google حسب الأرقام .

احصائيات خط جوجل

احصائيات خط جوجل

استضافة الخطوط المحلية مقابل الطرف الثالث

قبل الغوص في البرنامج التعليمي ، من المهم فهم بعض المزايا والعيوب بين استضافة الخطوط المحلية واستخدام خدمة جهة خارجية. تعني استضافة الخطوط محليًا أن لديك بالفعل ملفات الخطوط على الخادم الخاص بك (أو تم نسخها إلى شبكة CDN الخاصة بك والتي تستخدمها أيضًا لجميع أصولك الأخرى). بينما إذا كنت تستخدم جهة خارجية مثل Google Fonts أو Adobe Fonts ، فأنت تقوم ببساطة بتضمين الخطوط عن طريق الارتباط بأصل خارجي.

مزايا الخطوط المحلية
1. أوسع اختيار الخطوط

ميزة كبيرة لاستخدام الخطوط المحلية هي أن لديك مجموعة أوسع بكثير من الخطوط! بينما تحتوي خدمات الجهات الخارجية مثل Google Fonts و Adobe Fonts على مكتبات كبيرة ، لا يمكن مقارنتها بأي حال من الأحوال بمتاجر الخطوط المتميزة التي يمكنك من خلالها شراء أي خط ويب متميز تريده واستضافته على موقعك. سنستخدم بالفعل خطًا متميزًا في برنامجنا التعليمي أدناه والذي لا يمكنك الحصول عليه من أي خدمة تابعة لجهة خارجية.

2. يمكن أن تتكامل بشكل أفضل

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

3. لا يتعين عليك الاعتماد على خدمات الطرف الثالث

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

عندما يكون https://t.co/Kde0okKlP0 معطلاً ، يتوقف الويب عن العمل #customfontssuck # 3rdpartyjs

– مارك ⛔️🐝 (markhealey) 17 نوفمبر 2015

4. السيطرة الكاملة على التخزين المؤقت

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

تحدد خطوط google أداة التحقق من ذاكرة التخزين المؤقت

حدد مدقق ذاكرة التخزين المؤقت

5. عدد أقل من الطلبات يمكن أن يساوي أوقات تحميل أسرع

نظرًا لحقيقة أنه يجب تنزيل خطوط الويب من الجهة الخارجية ، فقد يؤثر ذلك بدوره على سرعة تحميل موقعك. أنت لا تعرف أبدًا مدى سرعة تشغيل خوادمهم في هذه اللحظة. ومع ذلك ، لديك المزيد من التحكم في هذا مع مضيف وورد بريس الخاص بك ، أو يجب عليك ذلك! Adobe Fonts ، على سبيل المثال ، يضيف طلبي HTTP خارجيين ويقوم أيضًا بترميز base64 لجميع تنسيقات الخطوط. إذا لم تكن معتادًا على الخطوط ، فلن تحتاج بعد الآن لخدمة جميع تنسيقات الخطوط ، فأنت تحتاج فقط إلى WOFF و WOFF2 (إذا كنت تريد ضغطًا إضافيًا).

باستخدام Google Fonts ، لديك أيضًا طلب DNS إضافي واحد للبحث عن fonts.googleapis.com للاستيلاء على ملف CSS. لديك بعد ذلك طلبات إضافية إلى fonts.gstatic.com لتنزيل ملفات الخطوط. عندما تستضيف محليًا ، تكون جميع الطلبات من نفس المجال ، وعلى الأرجح لن تحتاج إلى ملف CSS آخر لأنه سيكون داخل ملف CSS الخاص بموضوع وورد بريس.

طلبات خط google

طلبات HTTP لخط Google

6. اتصال HTTP / 2 واحد

إذا لم تكن قد قرأت عن مزايا HTTP / 2 حتى الآن ، فنحن نحثك على القيام بذلك. من خلال استضافة الخطوط الخاصة بك محليًا ، أو على CDN الخاص بك ، يمكنك الاستفادة من اتصال HTTP / 2 واحد للحصول على توازي وتعدد إرسال أفضل.

عيوب الخطوط المحلية

الآن بعد أن تجاوزنا ميزة الخطوط المحلية ، هناك أيضًا بعض العيوب التي يجب أن تكون على دراية بها.

1. يمكن تخزين خط Google مؤقتًا بالفعل

تستخدم Google Fonts شبكة CDN الخاصة بها ، وهي سريعة ، إنها Google بعد كل شيء. نظرًا لحقيقة أن العديد من مواقع الويب تستخدم بالفعل خطوط Google ، فمن المحتمل جدًا أن المستخدم لديه بالفعل الخط في ذاكرة التخزين المؤقت للمتصفح . إذا كنت تستخدم خطًا متميزًا وفريدًا ، فقد يؤدي بالفعل إلى زيادة أوقات التنزيل . على سبيل المثال ، إذا قام شخص ما بزيارة موقع ويب يستخدم خط Roboto من خطوط Google ، فسيتم تنزيله إلى ذاكرة التخزين المؤقت الخاصة به. إذا قاموا بعد ذلك بزيارة موقع الويب الخاص بك ، والذي يستخدم أيضًا Roboto ، فلن يلزم تنزيل الخط مرة أخرى. ولكن إذا كنت تستخدم خطًا متميزًا تم إصداره حديثًا مثل Proxima Soft ، فمن المرجح أن يتم تنزيله ، مما قد يؤدي إلى زيادة أوقات التحميل.

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

2. أكثر تعقيدا

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

3. مزيد من الحذر حول “خيارات الخطوط”

عندما تستضيف الخطوط المحلية ، يجب عليك اختيار أنواع الخطوط التي تريد دعمها. إذا اخترت التنسيقات الأحدث فقط ، مثل WOFF2 فقط ، فقد تتجاهل المتصفحات القديمة ، والتي بدورها ستتحول إلى الخطوط القديمة الآمنة للويب افتراضيًا . على سبيل المثال ، وفقًا لـ CanIUse و IE11 و Safari وبعض إصدارات Android Browser قد تواجه مشكلات في استخدام خطوط الويب WOFF2 فقط. لذلك ربما ترغب في استخدام WOFF + WOFF 2 لتكون آمنًا في جميع المجالات. يوفر WOFF 2 طرق ضغط أعلى بكثير ، ولهذا السبب قد ترغب في استخدام كليهما.

دعم متصفح woff 2

دعم متصفح WOFF2

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

4. لا تفعل ذلك بدون CDN

تستخدم العديد من المواقع حاليًا شبكة CDN مثل Cloudflare أو KeyCDN لتسريع تسليم أصولها. هذا مهم لأنه يقلل من زمن الوصول وأوقات البحث في DNS عبر اللوحة. إذا كنت تستخدم خطوطًا محلية ، ولا تستخدم CDN ، فيمكنك في الواقع إبطاء موقعك بدلاً من استخدام خدمة مثل Google Fonts أو Adobe Fonts. والسبب هو أن كل هذه الخدمات تستخدم CDN لتقديم خطوطها. لذلك نوصي بشدة ، ما لم يكن لديك سوى حركة مرور إلى منطقة جغرافية صغيرة ، استخدم دائمًا CDN إذا كنت تستضيف الخطوط الخاصة بك . وبالطبع ، تأكد من أنك تستخدم موفر CDN يدعم HTTP / 2 .

و  Kinsta CDN التي يدعمها HTTP / 2 ويتم تضمين عرض النطاق الترددي مجانا لجميع العملاء. 🚀

كيفية استضافة الخطوط المحلية في ووردبريس

حان الوقت الآن للجزء الممتع! استضافة الخطوط المحلية الخاصة بك في ووردبريس. ننتقل إلى خيارين مختلفين أدناه ، أحدهما بخط متميز اشتريناه ، والثاني هو أخذ خط Google واستضافته محليًا. في هذا البرنامج التعليمي ، نستخدم تثبيت وورد بريس جديدًا مع تثبيت قالب Twenty Seventeen.

كيفية استضافة Premium Fonts محليًا

كيفية استضافة خطوط جوجل محليًا

1. كيفية استضافة Premium Fonts محليًا

لاستضافة خط متميز محليًا ، اخترنا استخدام Fontspring وخط Proxima Soft الجديد الذي تم إصداره في يناير 2017. Proxima Nova Soft ، الذي أنشأه Mark Simonson ، هو إصدار أحدث من خط Proxima Nova الأصلي. لقد اخترنا Fontspring لأنها لا تتطلب أي برامج نصية للتتبع من جهة خارجية ، والخط عبارة عن عملية شراء لمرة واحدة يمكن استخدامها على عدد غير محدود من المواقع. كن حذرًا جدًا عند التسوق للحصول على الخطوط ، حيث أن الكثير منها يتطلب نصوصًا برمجية لتتبع الجهات الخارجية ، والتي تتعارض إلى حد ما مع الغرض من استضافتها محليًا.

Fontpring

خطوط الربيع

اشترينا خطوط Proxima Soft Regular وخطوط Proxima Soft Bold. بشكل عام ، يعتبر نوع الخط العادي والجريء كافيين لمعظم المواقع. اعتمادًا على موقعك ، قد ترغب أيضًا في الحصول على إصدار مائل وشبه عريض. ملاحظة: ليس لدينا أي شركة تابعة لـ Fontspring ، نعتقد ببساطة أنهم يقومون بشراء وترخيص الخطوط المتميزة بشكل صحيح!

الخطوة 1

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

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

تحميل برنامج Proxima soft

Proxima Soft تنزيل الخط

الخطوة 2

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

ملفات الخطوط المحلية

ملفات الخطوط المحلية

الخطوه 3

نأخذ ملفات الخطوط ونرفعها عبر FTP على موقع وورد بريس الخاص بنا إلى مجلد أنشأناه يسمى “الخطوط”. في هذا المثال ، نستخدم CDN لجميع أصولنا ، جنبًا إلى جنب مع البرنامج المساعد CDN Enabler المجاني  من الفريق في KeyCDN. يقوم هذا المكون الإضافي تلقائيًا بنسخ الخطوط التي قمنا بتحميلها للتو إلى شبكة CDN الخاصة بنا. على الرغم من أننا نقول استضافتهم محليًا ، لا يزال CDN يشير إلى أصولك المحلية. الجزء المهم هو أنك تخدم جميع أصولك من نفس الموقع ، ولا تشير إلى عدة نطاقات (مضيفين).

الخطوط المحلية بروتوكول نقل الملفات

تحميل الخطوط إلى خادم الويب

الخطوة 4

ستحتاج إلى الرجوع إلى الخطوط الجديدة في CSS على موقع وورد بريس الخاص بك. تحتوي الكثير من السمات على لوحة CSS مخصصة في الوقت الحاضر ، أو يمكنك استخدام مكون إضافي مجاني مثل Simple Custom CSS و JS . سنقوم بإدخال الكود التالي ، بالإشارة إلى عنوان URL الخاص بشبكة CDN.

@font-face {
 font-family: 'proxima_softregular';
 src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
 url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'proxima_softbold';
 src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
 url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

ستحتاج أيضًا إلى تحديث أنماطك للإشارة إلى عائلة الخطوط الجديدة. فيما يلي مثال على الكود الذي استخدمناه في موضوع Twenty Seventeen.

body {font-family: 'proxima_softregular', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}

هذه لقطة شاشة من المكوّن الإضافي Simple Custom CSS و JS.

الخطوط المحلية المخصصة كود المغلق

الخطوط المخصصة كود CSS

الخطوة الخامسة

إذا كان موضوع وورد بريس الخاص بك يحتوي على خطوط Google مدمجة بالفعل ، فستحتاج إلى التأكد من تعطيلها. خلاف ذلك ، قد تقوم بتحميل كل من الخطوط المحلية وخطوط Google. نظرًا لأننا نستخدم موضوع Twenty Seventeen في هذا البرنامج التعليمي ، فإننا نستخدم المكون الإضافي المجاني Disable Google Fonts . يعمل هذا فقط مع السمات الافتراضية في وورد بريس. بالنسبة لمعظم السمات ، ربما تحتاج إلى التواصل مع المطور ويمكنه بسرعة توفير وظيفة لتعطيل خطوط Google. أو تحقق من وثائقهم ، عادةً ما يكون هذا تعديلًا سريعًا للغاية. قد تحتوي بعض السمات على خيار لتشغيلها أو إيقاف تشغيلها في النهاية الخلفية.

هل تعاني من مشاكل التوقف و وورد بريس؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

وهذا كل شيء! فيما يلي لقطة شاشة مع تحميل خط Proxima Soft الجديد الخاص بنا لخط الجسم والعناوين الخاصة بموضوع Twenty Seventeen.

خطوط جديدة على موقع ووردبريس

خطوط جديدة على موقع ووردبريس

وهنا لقطة شاشة لطلبات HTTP الخاصة بنا. كما ترى ، لدينا طلبان فقط لخطوط WOFF2 ، بدلاً من طلبات Google الأربعة التي عرضناها سابقًا. لدينا خطوط WOFF على الموقع أيضًا ، ولكن نظرًا لأن Chrome يدعم WOFF2 ، يتم سحبها بدلاً من ذلك. إذا كنا سنذهب إلى الموقع باستخدام IE 11 على سبيل المثال ، فسيتم تحميل خطوط WOFF بدلاً من ذلك.

تحميل الخطوط المحلية

طلبات HTTP للخطوط المستضافة محليًا

2. كيفية استضافة خطوط جوجل محليا

الطريقة الثانية لاستضافة الخطوط محليًا هي استخدام الخط الذي تفضله بالفعل على Google Fonts ونقله ببساطة إلى خادمك أو CDN. من المعروف أن Open Sans خفيف الوزن وسريع للغاية. لذلك سنستخدم ذلك في مثالنا.

الخطوة 1

أفضل طريقة للحصول على Google Fonts هي استخدام أداة  google-webfonts-helper المجانية التي نستخدمها في هذا البرنامج التعليمي. قد ترغب أيضًا في التحقق من مشروع Font Face Observer . أول شيء عليك القيام به هو البحث عن Google Font الذي تريده ، وتحديد الأنماط. نختار مرة أخرى أنماط الخط العادية والجريئة (700).

تنزيل خط مفتوح بلا خط

تنزيل خط ويب Open Sans

الخطوة 2

ثم ستحتاج إلى اختيار دعم المتصفح الذي تريده. ستمنحك المتصفحات الحديثة خطوط WOFF و WOFF2 ، وهو ما نريده. يمنحك أفضل دعم WOFF و WOFF2 و EOT و TTF و SVG. كما ترى ، يمنحك الرمز الذي يمكنك نسخه إلى الحافظة الخاصة بك ، بالإضافة إلى ملف مضغوط للتنزيل يحتوي على الخطوط.

متصفحات الخطوط الحديثة

CSS للخطوط في المتصفحات الحديثة

ثم تكون بقية التعليمات مشابهة جدًا لمثال الخطوط المتميزة أعلاه.

الخطوه 3

نأخذ ملفات الخطوط ونرفعها عبر FTP على موقع وورد بريس الخاص بنا إلى مجلد أنشأناه يسمى “الخطوط”. في هذا المثال ، نستخدم CDN لجميع أصولنا ، جنبًا إلى جنب مع البرنامج المساعد CDN Enabler المجاني  من الفريق في KeyCDN. يقوم هذا المكون الإضافي تلقائيًا بنسخ الخطوط التي قمنا بتحميلها للتو إلى شبكة CDN الخاصة بنا. على الرغم من أننا نقول استضافتهم محليًا ، لا يزال CDN يشير إلى أصولك المحلية. الجزء المهم هو أنك تخدم جميع أصولك من نفس الموقع ، ولا تشير إلى عدة نطاقات (مضيفين).

تحميل خادم خطوط جوجل

تحميل خطوط جوجل لخادم الويب

الخطوة 4

ستحتاج إلى الرجوع إلى الخطوط الجديدة في CSS على موقع وورد بريس الخاص بك. تحتوي الكثير من السمات على لوحة CSS مخصصة في الوقت الحاضر ، أو يمكنك استخدام مكون إضافي مجاني مثل Simple Custom CSS و JS . سنقوم بإدخال الكود التالي ، بالإشارة إلى عنوان URL الخاص بشبكة CDN.

/* open-sans-regular - latin */
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'),
 url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'),
 url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

ستحتاج أيضًا إلى تحديث أنماطك للإشارة إلى عائلة الخطوط الجديدة. فيما يلي مثال على الكود الذي استخدمناه في موضوع Twenty Seventeen.

body {font-family: 'Open Sans', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}

هذه لقطة شاشة من المكوّن الإضافي Simple Custom CSS و JS.

الخطوط المحلية المخصصة css مفتوحة بلا

CSS لخط Open Sans المستضاف محليًا

الخطوة الخامسة

إذا كان موضوع وورد بريس الخاص بك يحتوي على خطوط Google مدمجة بالفعل ، فستحتاج إلى التأكد من تعطيلها. قد يبدو هذا مثيرًا للسخرية بعض الشيء ، لأننا نستخدم خطوط Google. لكن سبب حاجتك إلى القيام بذلك هو تعطيل الطلبات الخارجية. نظرًا لأننا نستخدم موضوع Twenty Seventeen في هذا البرنامج التعليمي ، فإننا نستخدم المكون الإضافي المجاني Disable Google Fonts . يعمل هذا فقط مع السمات الافتراضية في وورد بريس. بالنسبة لمعظم السمات ، ربما تحتاج إلى التواصل مع المطور ويمكنه بسرعة توفير وظيفة لتعطيل خطوط Google. أو تحقق من وثائقهم ، عادةً ما يكون هذا تعديلًا سريعًا للغاية. قد تحتوي بعض السمات على خيار لتشغيلها أو إيقاف تشغيلها في النهاية الخلفية.

وهذا كل شيء! فيما يلي لقطة شاشة لخط Google Open Sans الجديد الذي يتم تحميله لخط الجسم والرؤوس في موضوع Twenty Seventeen.

سبيل المثال الخطوط المحلية المفتوحة بلا

مثال على خط Open Sans المستضاف محليًا

وهنا لقطة شاشة لطلباتنا. كما ترى ، لدينا طلبان فقط لخطوط WOFF2 ، بدلاً من طلبات Google الأربعة التي عرضناها سابقًا. لدينا خطوط WOFF على الموقع أيضًا ، ولكن نظرًا لأن Chrome يدعم WOFF2 ، يتم سحبها بدلاً من ذلك. إذا كنا سنذهب إلى الموقع باستخدام IE 11 على سبيل المثال ، فسيتم تحميل خطوط WOFF بدلاً من ذلك.

طلبات فتح بلا http

فتح طلبات Sans HTTP

ملخص

وهذا كل شيء! أنت تعرف الآن كيفية استضافة الخطوط المحلية من كل من متجر الخطوط المتميز أو نقل خطوط Google إلى الخادم الخاص بك و / أو CDN. لذا يمكنك الآن إلقاء نظرة على جميع الخطوط الجميلة الموجودة هناك ، دون القلق بشأن كيفية تأثيرها على الأداء. قد يقومون فقط بإعطاء موقع وورد بريس الخاص بك عمليات التجميل التي يحتاجها (تأكد من قراءة دليلنا التفصيلي حول خطوط وورد بريس )! وإذا كنت تشعر بالفضول بسبب عدم استخدامنا للخطوط المحلية ، فذلك لأننا نعمل على تصميم موقع ويب جديد ، لذلك قد نكون في المستقبل القريب. بديل رائع آخر للنظر فيه هو خطوط النظام .

نود أن نسمع ما هو الإعداد الخاص بك. هل تستخدم خدمة جهة خارجية لتحميل خطوط الويب الخاصة بك وهل حاولت الاستضافة المحلية حتى الآن؟

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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

توضيح

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

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

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}

Deprecated: wp_enqueue_script أستدعيت بواسطة مُعطى مهجور منذ النسخة 10.3.0! يُرجى إستخدام المُعالج الجديد ⁦wc-photoswipe⁩ بدلًا من المُعالج السابق ⁦photoswipe⁩. in /home/aspiqswk/2.mawthuk.com/wp-includes/functions.php on line 6121