fbpx
تغيير الخطوط في الووردبريس ( اسهل طريقة) 2019

تغيير الخطوط في الووردبريس ( اسهل طريقة) 2019

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

تغيير الخطوط في ووردبريس باستخدام اضافة Plugin

هناك الكثير من الاضافات التي تساعد في تغيير الخط في ووردبريس في مكتبة الإضافات التابعة للووردبريس

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

1- WP Google Fonts

تغيير الخطوط في الووردبريس
تغيير الخطوط في الووردبريس

الايجابيات
سهلة الاستخدام
الوصول إلى عدد كبير من الخطوط جوجل


السلبيات
غير قادر على معاينة الخطوط
غير قادر على تحميل الخطوط المخصصة


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

2- Easy Google Fonts

تغيير الخطوط في الووردبريس
تغيير الخطوط في الووردبريس

الايجابيات
القدرة على معاينة الخطوط المخصصة في Customizer قبل حفظها
التخصيص قوية


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


استنتاج

تمنحك اضافة
Easy Google Fonts تحكمًا لا يصدق حول كيفية دمج الخطوط المخصصة على موقعك في الووردبريس , سهلة الاستخدام ويمكنك التحكم في كل عنصر في موقعك عن طريق الـ
Customizer

تغيير الخطوط في الووردبريس بشكل متقدم ( باستخدام CSS3 )


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

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

2-تحميل الخط

قم بتحميل الخط الذي اخترته على الخادم الخاص بك. قد ترغب في تخزينه في دليل “Fonts” الموجود في كل قالب , او يمكنك وضعه بمكان اخر على خادم الويب الخاص بك

قم بتدوين مكان تخزين ملفات الخطوط على الخادم الخاص بك.

تذكر أن تقوم بتضمين الملفات لأي متغيرات للخط الذي تخطط لاستخدامه ، مثل غامق أو مائل.

يمكنك استخدام الصيغ المقبولة للخطوط وهي :

  • WOFF / WOFF2: اختصاراً لـ ( Web Open Font Format ) مخصصة للإستخدام عبر الإنترنت، قامت بإنشاؤها موزيلا بالتعاون مع شركات أخرى، وتعتبر هذه الصيغة الأكثر استخدمًا عبر الإنترنت لسرعة تحمليها.
  • SVG / SVGZ: اختصاراً لـ (Scalable Vector Graphics )، حيثُ يعتبر هذا النوع من الخطوط الأكثر سهولةً ومرونةً في الإستخدام ومدعوم بالدرجة الأولى على متصفح سفاري للأيفون وغير مدعوم للمتصفحات الباقية كالكروم وفايرفوكس الخ …
  • EOT : اختصاراً لـ ( Embedded Open Type )، تمّ تصميمه بواسطة شركة مايكروسوفت بإستخدام خصائص الـ @font-face ولا يعمل إلا على متصفح إكسبلور وما دون ذلك .
  • OTF / TTF: اختصاراً لـ ( OpenType Font &TrueType Font )، يهتمّ العديد من المصممين بهذا النوع من الخطوط حيثُ يقومون بتكوين النوع WOFF من خلاله بكل يُسر وسهولة من أجل الإستخدام عبر الويب.

3- اضافة font-face الى اكواد css في موقعك .

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

سنطرح الية عمل الكود بشكل مجزء لتصلك الفكرة بسهولة.

قم باضافة تاغ الى ملف اكواد الاساس كالتالي :

@font-face { }

أولاً داخل قسم font-face ، امنح الخط اسمًا يمكنك استخدامه لاحقًا للإشارة إليه:

font-family: ‘lovelyFont’;

ثم قم بتحديد مسار الخط مع اضافة صيغته كالتالي :

src: url(‘fonts/lovely_font.eot’);

قم بتضمين صيغ الخط الاخرى

src: url(‘fonts/lovely_font.otf’) src: url(‘fonts/lovely_font.ttf’)

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

src: url(‘fonts/lovely_font.otf’) format(‘opentype’); src: url(‘fonts/lovely_font.ttf’) format(‘truetype’);

سيكون شكل الكود النهائي لطلب الخطوط كالتالي :

@font-face{ font-family: ‘lovelyFont’;src: url(‘fonts/lovely_font.otf’) format(‘opentype’); src: url(‘fonts/lovely_font.ttf’) format(‘truetype’); }


نأمل ان تكون قد استفدت من هذا الدرس في كيفية تغيير الخطوط في ووردبريس

قد ترغب في قراءة :

ما هو الووردبريس ؟
كيفية انشاء قالب الابن في ووردبريس
كيفية تثبيت اضافات الووردبريس للمبتدئين
الفرق بين wordpress.com و wordpress.org
كيفية تسريع موقع الووردبريس

اترك تعليقاً