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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

خط أفضل رائع - أفضل الإضافات للطباعة في WordPress

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

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

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

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

خطوط Google - أفضل المكونات الإضافية للطباعة في WordPress

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

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

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

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

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

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

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

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

على الرغم من أنه يوفر الوصول إلى عدد أقل من خطوط Google ، إلا أنه فريد من نوعه من حيث أنه يسمح لك بإنشاء عناصر تحكم وقواعد مخصصة للخطوط في منطقة الإدارة ، والتي ستظهر على الفور في أداة تخصيص 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.

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

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

خاتمة

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

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

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

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

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

...

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