كيفية إضافة خطوط مخصصة إلى موقع WordPress

هل ترغب في معرفة كيفية إضافة خطوط مخصصة إلى موقع WordPress على الويب؟

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

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

وهنا ينشأ سؤالان: مكان الحصول على الخطوط المخصصة لـ WordPress و كيفية تثبيت الخطوط المخصصة على موقع الويب الخاص بك.

دعونا معرفة ذلك.

لماذا يجب علي استخدام الخطوط المخصصة؟

لقد ولت الأيام التي كانت تعتبر فيها Times New Roman و Georgia هما الخطان الوحيدان للنصوص على مواقع الويب. على مدار السنوات القليلة الماضية ، تغيرت مساحة الخط تمامًا مع ظهور خطوط مثل جوجل الخطوط و الأخرين.

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

لذلك ، في هذه المقالة ، ستتعلم كيفية العثور على الخطوط المخصصة المناسبة واستخدامها على موقع WordPress الخاص بك.

أهمية استخدام الخطوط المخصصة

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

يعتمد الكثير على بناء الخطوط. على مستوى الوعي واللاوعي - يقوم الجميع بتقييم محتوى صفحة الويب حسب التصميم.

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

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

بدائل خطوط جوجل

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

هنا بعض موارد أخرى للعثور على الخطوط للاستخدام المجاني والتجاري:

1. TemplateMonster - ستجد على موقع TemplateMonster كل ما تحتاجه لتصميم الويب. هناك أيضًا العديد من الخطوط وحزم الخطوط للاستخدام الشخصي بسعر زهيد. بالإضافة إلى ذلك ، لمساعدتك في الاختيار ، يتم عرض جميع الخطوط في الكتيبات أو الإطارات. يتم أيضًا تقديم كل خط بترخيص تجاري.
2. MyFonts - تقدم MyFonts حاليًا أكبر مجموعة مختارة من الخطوط في العالم. ومع ذلك ، فإن الأسعار هنا أيضًا في الجزء العلوي. لذلك إذا كانت ميزانيتك محدودة ، فقد لا يكون هذا مناسبًا لك.
3. فونتسبرينج - تبيع Fontspring خطوطًا جديدة للاستخدام التجاري. ولكن في كل عائلة تقريبًا ، يمكن استخدام خط أو خطين مجانيين للأغراض الشخصية. أيضا ، هناك قسم منفصل مع الخطوط المجانية. المجموعة نابضة بالحياة. لكنك ستحتاج إلى دراسة معلومات الترخيص بعناية لخط معين قبل التنزيل.
4. كوفونفونتس - إنها أيضًا مجموعة ضخمة من الخطوط المختلفة. حدد أيًا منها ، وسترى صفحة بها معلومات مفصلة عنها. هناك الكثير من الخطوط المجانية ، وهي مقسمة إلى أقسام فردية. نظام الفرز في CufonFonts مرن ومريح للغاية. أيضا ، دعم خط الويب مدرج.
5. dafont - مجموعة أخرى يمكن الوصول إليها من 3 خط مجاني. تم تصميم معظمها للاستخدام الشخصي فقط. ميزة DaFont الرائعة هي نظام فئات. يمكنك تحديد الخطوط بأسلوب الرسوم الهزلية وألعاب الفيديو والعتيقة وما إلى ذلك.

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

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

كيفية إضافة خطوط مخصصة إلى ووردبريس

هناك عدة طرق لإضافة الخطوط إلى موقع WordPress على الويب:

1. الإضافات : في هذه الحالة ، مختلف الإضافات وورد تستخدم لتسهيل العملية.
2. يدويا : باستخدام هذه الطريقة ، تحتاج إلى تنزيل خط من الموقع وتعديل ملف CSS.
3. المواضيع: تحتوي العديد من السمات الشائعة على خيارات مضمنة لتخصيص خطوطك (ملاحظة - لن نغطي هذا الخيار لأن العملية ستختلف وفقًا للموضوع الذي تستخدمه.

الخيار 1 - تغيير خطوط WordPress باستخدام الإضافات

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

ميزات الإضافات المخصصة للخطوط

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

فيما يلي بعض النقاط التي يجب مراعاتها:

• القدرة على استخدام خط مخصص
• القدرة على استخدام خطوط متعددة
• الرؤوس والمكونات المستهدفة
• المكافأة: القدرة على تغيير إعدادات الخط من المحرر المرئي

هذا كل شيئ. السمة الأولى في القائمة مهمة للغاية. لا يزال بإمكانك تنزيل الخطوط من مواقع الويب مثل DaFont و Font Squirrel وما إلى ذلك ، ولكن يجب أن تكون قادرًا على تحميلها على WordPress.

دعنا نلقي نظرة على بعض المكونات الإضافية لـ WordPress التي تسمح لك بتحميل خطوط مخصصة.

1. أفضل رهيبة الخط

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

ستجد هناك ميزات: تحديثات منتظمة ، ومولد رمز قصير ، والتوافق مع مكونات WordPress الإضافية ، إلخ ...

تحميل | عرض | استضافة المواقع

2. خطوط جوجل لورد

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

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

وتشمل ميزاته: معاينة في الوقت الحقيقي ، أ سيو متقدمة جدا، دعم متعدد اللغات ، دعم لمزيد من 870 + Google Fonts ، تحديثات سهلة وأكثر.

تحميل | عرض | استضافة المواقع

3. الخطوط البرنامج المساعد

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

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

4. من السهل جوجل الخطوط

Easy Google Fonts هي واحدة من أفضل الإضافات وورد لتخصيص طباعة موقع الويب الخاص بك. مثل Fonts Plugin ، يتيح لك الاختيار من بين مئات خطوط Google ومعاينتها في Customizer قبل إضافتها إلى موقع الويب الخاص بك.

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

تحميل | عرض | استضافة المواقع

الخيار 2 - تثبيت خطوط WordPress المخصصة يدويًا

باستخدام التوجيه @ font-face ، يمكنك توصيل خط واحد أو أكثر بموقعك على الويب. لكن هذه الطريقة لها مزاياها وعيوبها.

فوائد:

• بفضل CSS ، يمكنك توصيل الخطوط بأي تنسيق: ttf ، otf ، woff ، svg.
• سيتم وضع ملفات الخطوط على الخادم الخاص بك - لن تعتمد على خدمات الجهات الخارجية.

عيوب :

• للحصول على اتصال الخط الصحيح لكل نمط ، يجب عليك تسجيل رمز منفصل.
• بدون معرفة CSS ، يمكن أن تشعر بالارتباك بسهولة.

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

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

الخطوة 1: قم بإنشاء مجلد "خطوط"

في نسق طفلك ، أنشئ مجلد "خطوط" جديد ضمن: wp-content / theme / your-child-theme / الخطوط

الخطوة 2. قم بتحميل ملفات الخطوط التي تم تنزيلها إلى موقع الويب الخاص بك

يمكن القيام بذلك عبر لوحة تحكم الاستضافة الخاصة بك أو عبر FTP.

أضف جميع ملفات الخطوط إلى مجلد الخطوط المضافة حديثًا: wp-content / theme / في النسق الفرعي الخاص بك ، قم بإنشاء مجلد "خطوط" جديد ضمن: wp-content / theme / your-child-theme / الخطوط الذي قمت بإنشائه.

الخطوة 3. استيراد الخطوط عبر ورقة أنماط السمة الفرعية

فتح الملف style.css لموضوع طفلك وأضف الكود التالي في بداية ملف CSS (بعد تعليق القالب الفرعي):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

حيث MyWebFont هو اسم الخط وقيمة الخاصية src (البيانات الموجودة بين قوسين بين علامتي الاقتباس) هي موقعهم (الروابط النسبية). نحتاج إلى تحديد كل نمط على حدة.

نظرًا لأننا نربط النمط العادي أولاً ، فقد قمنا بتعيين خصائص وزن الخط ونمط الخط على الوضع العادي.

الخطوة 4. عند الإضافة مائل اكتب التالي:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

عندما يكون كل شيء متماثلًا ، فنحن الوحيدين الذين نلحق خاصية نمط الخط بالخط المائل.

الخطوة 5. لإضافة الخط الغامق ، أضف الكود التالي:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

حيث قمنا بتعيين خاصية وزن الخط إلى غامق.

تذكر تحديد الموقع الصحيح لملفات الخطوط لكل نمط.

الخطوة 6. لتوصيل الخط المائل الغامق ، اكتب ما يلي:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

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

ولكن هناك ملاحظة واحدة: لن يتم عرض اتصال الخط هذا بشكل صحيح في Internet Explorer 8. العزاء هو أن هناك عددًا قليلاً جدًا من الأشخاص ما زالوا يستخدمون IE8.

الموارد الأخرى الموصى بها

ندعوك أيضًا إلى الرجوع إلى الموارد الموضحة أدناه للمضي قدمًا في قبضة والتحكم في موقع الويب والمدونة.

• 10 ملحقات WordPress أكورديون لموقع ويب
• كيفية إضافة أعمدة متعددة في WordPress
• بعض الإضافات لدمج خدمات جوجل على بلوق
• 5 ووردبريس الإضافات لعرض الإخطارات
• باستخدام مختلف الخلفيات وورد

وفي الختام

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

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

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

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

في هذه الأثناء، شارك هذا المقال على الشبكات الاجتماعية المختلفة.   

...