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

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

  • أقوم بتطوير القالب الخاص بي الذي قمت بتثبيته عبر github.
  • في مستودع الأصول (assets repository)، قمت بتحميل الخطوط الخاصة بي التي ليست من خطوط Google:

  • في ملف about.json، قمت باستيراد الملفات:

Capture d’écran 2023-04-06 à 11.09.51

  • في مستودع scss الخاص بي، قمت بإنشاء عائلات الخطوط الخاصة بي:

لقد حاولت إضافة: format(‘woff2’) ولكن هذا لم ينجح أيضاً.

  • وبعد ذلك:

Capture d’écran 2023-04-06 à 11.07.22

حسناً، إنه لا يعمل… أي فكرة؟

إعجابَين (2)

لست متأكدًا من ماهية المشكلة. سألقي نظرة على تضمين الأصول (مثل الصور والخطوط) في السمات والمكونات. آسف إذا لم يكن ذلك مفيدًا.

إعجابَين (2)

مرحباً @Joart،

أنا متأكد من أنني أبسّط الأمر، لكنني لاحظت في مقتطف about.json الخاص بك، أن المسار إلى الخطوط يشير إلى مجلد assets، ولكن في ملف css الخاص بك، يشير المسار إلى مجلد fonts. هل أنت متأكد من أن مسار مصدر ملف css صحيح؟

5 إعجابات

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

@font-face {
   font-family: supply-light;
   src: url($supply-light);
}

هذا مغطى في Include assets (e.g. images, fonts) in themes and components

8 إعجابات

حسنًا، لقد حاولت ولكن لم ينجح الأمر :frowning:

من الصعب تخمين السبب. يمكنك وضع السمة الخاصة بك على جيثب وربطها بها أو نشر الكود الخاص بك هنا.

هل اتبعت المثال الذي قدمه @awesomerobot؟

إعجاب واحد (1)

مرحباً @Joart،

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

عندما جربت خط .otf ومرة أخرى مع خط .woff2 آخر تم تحويله بواسطة محول أكثر شهرة، تمكنت من إضافة الخط المخصص باستخدام الخطوات الموجودة في الدليل الذي ربطه @pfaffman و @awesomerobot.

لقد استغرق الأمر خطوتين فقط - تحميل الملف باستخدام نافذة تحميل الإضافات، وإضافة سطري @font-face و body فقط من مثال SCSS إلى السمة أو المكون.

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

3 إعجابات

نعم، شكراً لك! لقد جربت بصيغة ttf وهي تعمل!

إعجاب واحد (1)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.