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

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

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

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

  3. بعد الحصول على ملفات كافية، يمكنك تحميلها إلى المجلد "ملف" في إعدادات السمة .

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

  4. بعد ذلك، ارجع إلى لوحة تحكم المشرف، وانقر على المتجر عبر الإنترنت > السمات واختر سمة Be Yours لمزيد من التعديل. انقر فوق الإجراءات > تحرير التعليمات البرمجية .

  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-body-family" للانتقال إلى سطر التعليمات البرمجية ذي الصلة واستبدال جميع أجزاء {{...}} بالنص المضاف لعائلة الخطوط في رموز الخطوة 6 (في موقعنا على سبيل المثال، هو 'MyFontHeading'). وبالمثل، ابحث عن النص "font-heading-family" واستبدل جميع أجزاء {{...}} بالنص المضاف لسطر عائلة الخطوط ("MyFontBody" في مثالنا).
  8. بعد الاستبدال يصبح مثل الصورة التالية:
  9. وأخيرا، انقر فوق حفظ .

ملحوظة :

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

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

Back to دعم Be Yours