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

يقدم Elementor الخطوط المخصصة. أضف خطوط & Typekit المستضافة ذاتيًا ، واستخدمها في مشاريع Elementor لإنشاء لغة علامة تجارية فريدة.

هل سئمت من تشغيل خطوط مطحنة Sans Serif مثل Arial و Helvetica وغيرها؟ سئمت كل تلك الخطوط الافتراضية التي تحصل عليها؟ بالتأكيد تريد أن تبرز من بين الحشود. فلماذا لا تجرب خطًا مختلفًا – خطًا مخصصًا.

بينما يأتي Elementor مُصممًا مسبقًا مع أكثر من 800 خط مختلف من خطوط Google للاختيار من بينها ، فإن خطوط Google الافتراضية السهلة في بعض الأحيان لا تكفي.

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

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

اكتشف أفضل 40 خطًا لمواقع الويب

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

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

تتضمن هذه الطريقة العمل مع مجلدات ووردبريس.

1. أضف مجلد “خطوط” جديد إلى مجلد نسقك عبر عميل FTP. يجب وضع المجلد الجديد ضمن wp-content / theme / Fonts

2. بمجرد إضافة مجلد “الخطوط” الجديد ، أضف جميع ملفات الخطوط إليه.

3. الآن ، افتح ورقة أنماط السمة (style.css) وأضف الكود التالي إليها:

@font-face {

            font-family: ‘nameofnewfont’;

            src: url(“/fonts/nameofnewfont.woff2”) format(“woff2”),

                         url(“/fonts/nameofnewfont.woff”) format(“woff”);

            font-weight: normal;

            font-style: normal;

}

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

يمكن أن تكون هذه الطريقة مؤلمة للمبتدئين. متى أردت إضافة تكوينات مثل “مائل” أو “غامق” ، فسيتعين عليك إجراء نفس العملية وإضافة تلك المعلمات. هناك الكثير من الترميز المتضمن.

بالنسبة لأولئك الذين لا يرغبون في التعامل مع تلك التقنية الضخمة الجامبو – هذا هو بالضبط المكان الذي يأتي فيه Elementor للإنقاذ. تحقق من هذا الفيديو التعليمي الرائع .

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

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

تنسيق Web Open Font Format (WOFF) – WOFF هو التنسيق الأكثر موصى به للاستخدام لأنه مدعوم من قبل جميع المتصفحات الحديثة

تنسيق Web Open Font Format (WOFF 2.0) – خط TrueType (TTF) / OpenType (OTF) الذي يوفر ضغطًا أفضل من WOFF 1.0

خطوط تروتايب (TTF) – تم تطوير هذا الخط في أواخر الثمانينيات من قبل Apple و Microsoft.

خطوط / أشكال SVG – تسمح خطوط SVG باستخدام SVG كحروف رسومية عند عرض النص. تأكد من استخدام هذا التنسيق لدعم الإصدارات القديمة من iPhone

خطوط OpenType المضمنة (EOT) – يعمل ملف الخط هذا على IE ، ولكن ليس على المستعرضات الأخرى. تأكد من استخدام هذا التنسيق لدعم الإصدارات السابقة من IE

في Elementor ، سهلنا تحميل تنسيقات خطوط الويب المخصصة:

1. توجه إلى لوحة تحكم ووردبريس> عنصر> خطوط مخصصة ، وانقر فوق “إضافة جديد”.

صورة 4

2. الآن، إضافة أي خط بإضافة اسم الخط وتحميل لها WOFF ، WOFF2 ، الصناديق ، SVG أو EOT الملف. يوصى بتحميل أكبر عدد ممكن من ملفات الخطوط ، من أجل توفير الدعم لأقصى عدد من المتصفحات.

الصورة 2

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

مكان البحث عن الخطوط المخصصة

هناك العديد من مواقع الويب التي تقدم خطوطًا مجانية ، وخطوط مميزة أكثر تطوراً وفريدة من نوعها مثل Font Squirrel و DaFont و Fontsly وغيرها. ولكن هناك أيضًا بعض الخدمات التي تقدم تجربة أكثر تخصيصًا ، مثل Adobe Typekit.

Adobe Typekit متوفر الآن في Elementor

الصورة 3

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

تقدم Adobe خطين من خطوط Typekit مجانًا ، لذا يمكنك تجربتها أولاً ومعرفة كيف تحبها.

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

يعمل Typekit بسلاسة مع Elementor. ما عليك سوى إدخال مفتاح Typekit في لوحة معلومات الإعدادات (علامة تبويب التكامل) ، والحصول على الفور على جميع خطوط Typekit داخل إعدادات الطباعة المختلفة في Elementor. باستخدام هذا التكامل ، لن تحتاج إلى تنزيل أو تثبيت أو كتابة أي شيء لاستخدام خطوط Typekit.

لم يكن الانتقال من Photoshop PSD إلى تصميم ووردبريس المباشر النهائي أسهل من أي وقت مضى ، باستخدام تكامل Typekit.

ضمن العنصر> الإعدادات> عمليات التكامل ، يمكنك إضافة معرف مجموعة Typekit. بمجرد إضافته ، انقر فوق “مجموعة أدوات المزامنة”. انتظر بضع دقائق ، وسترى جميع خطوط Typekit في Elementor. بعد إضافة خطوط جديدة إلى حساب Typekit الخاص بك ، لا تنس العودة إلى صفحة الدمج ومزامنة الخطوط مرة أخرى.

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

أوزان وأنماط الخطوط

يتم تجميع الخطوط المخصصة في مجموعات. تتضمن كل عائلة خطوط مجموعتها الخاصة من الأوزان والأنماط ، والتي يتم تحميلها بشكل منفصل.

ويمكن أن تشمل عائلة الخط مجموعة من الأوزان، والتي تمتد بين 100-900، وكذلك عادي، بولد ، أكثر جرأة أو أوزان أخف. ويمكن أن تشمل أيضا عادي، مائل أو مائل الخطوط. يمكن إضافة أي اختلاف في الوزن والنمط بشكل منفصل إلى مجموعة عائلة الخطوط.

إذا كنت تستخدم كود CSS ، فستستخدم أوامر مثل font-face ، أو font-style للتأكد من أن النتيجة النهائية ستكون كما تريدها تمامًا ، ومع ذلك ، بمجرد تحميل أشكال الخط الخاصة بك ، ستتمكن من لاختيار الخط داخل Elementor وتعديل وزنه ونمطه وفقًا لذلك وبسهولة.

ملاحظة: إذا لم تقم بتحميل وزن معين ، فلن يكون متاحًا في المحرر. بدلاً من ذلك ، فإن المتصفحات الداعمة – مثل Firefox و Safari و Chrome وغيرها ، ستعود إلى أقرب وزن متاح.

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