أضف خطوطًا مخصصة إلى سمة Concept الخاصة بك

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

قبل الخط المخصص	بعد تخصيص الخط

يمكنك تخصيص الخطوط في قالب المفهوم الخاص بك باستخدام إحدى الطريقتين أدناه:

• تحرير الكود السائل (موصى به للغاية)

  فيما يلي دليل من 9 خطوات لتحقيق ذلك:

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

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

     

  3. بعد الحصول على ملفات كافية، يمكنك تحميلها عبر [لوحة تحكم المشرف] > [المحتوى] ¹ > [الملفات] ² > [تحميل] ³ .

     

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

     

  4. بعد ذلك، ارجع إلى لوحة تحكم المشرف، وانقر على [المتجر الإلكتروني] ¹ > [السمات] ² > اختر سمة المفهوم > انقر على [الإجراء] ³ > [تحرير الكود] ⁴ .

     

  5. في نافذة كود التحرير المفتوحة، انتقل إلى المجلد [Snippets] ¹ في العمود الأيسر. في هذا المجلد، انقر فوق الملف [css-variables.liquid] ² لإضافة بعض التعليمات البرمجية المخصصة للخط الجديد.

     

  6. في الملف المفتوح "css-variables.liquid"، يمكنك إضافة رموز إضافية ضمن نمط علامة التبويب. يمكن العثور عليه تحت النص {%- style -%} . تتم إضافة الرموز على النحو التالي:

     
     @الخط الوجه {
     عائلة الخط: "MyFontHeading";
     src: تنسيق url(' أضف رابط ملف الخط الخاص بك ')("woff2")،
     url(' أضف رابط ملف الخط الخاص بك ') تنسيق("woff"); }
     
     @الخط الوجه {
     عائلة الخط: "MyFontBody"؛
     src: تنسيق url(' أضف رابط ملف الخط الخاص بك ')("woff2")،
     url(' أضف رابط ملف الخط الخاص بك ') تنسيق("woff"); }

     ملاحظة: يتم تخصيص أقسام النص المائل بواسطتك. يعتمد عدد رموز @font-face{ } المراد إضافتها على عدد أنماط الخطوط المتوفرة لديك.

     

  7. وبعد ذلك عليك:

     • ابحث عن النص "font-heading-family" واستبدل جميع أجزاء {{...}} بالنص المضاف لسطر عائلة الخطوط ("MyFontBody" في مثالنا).

     • ابحث عن النص "font-body-family" للانتقال إلى سطر التعليمات البرمجية ذي الصلة واستبدل جميع أجزاء {{...}} بالنص المضاف لعائلة الخطوط في رموز الخطوة 6 (في مثالنا، هو ""MyFontHeading")

     

  8. بعد الاستبدال يصبح مثل الصورة التالية:

     

  9. ملحوظة:

     • الإعدادات الموجودة في إعدادات السمة > الطباعة لم تعد سارية بغض النظر عما قمت بتكوينه هنا بمجرد إضافة هذه الرموز في ملف "css-variables.liquid".
     • تنطبق جميع التعليمات المذكورة أعلاه عند تطبيق نفس الخط المخصص لجميع الأقسام والكتلة. في حال كنت بحاجة إلى تطبيق خطوط مختلفة لأقسام أو كتل مختلفة، ستكون عملية التحرير أكثر تعقيدًا ويرجى الاتصال بفريق الدعم لدينا للحصول على مزيد من المساعدة.
• باستخدام تطبيق RoarTheme

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

  

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