استخدام خطوط علامتكم على صفحات المنشئ.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

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

قبل أن تبدؤوا

  • تحتاجون إلى الوصول إلى ملفات قالبكم؛ فاستخدموا قالبًا مخصصًا أو قالبًا فرعيًا.
  • تحققوا من أن ترخيص الخط يسمح بالاستخدام على موقع ويب.
  • تستخدم الخطوات مكتبة global-styling وملف css/custom.css من CSS مخصص.

الإعداد

  1. أضيفوا ورقة أنماط الخط إلى المكتبة في mytheme.libraries.yml. ولخط Google:

    global-styling:
  css:
    theme:
      'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external }
      css/custom.css: {}

  2. اضبطوا الخط في css/custom.css:

    body {
  font-family: 'Inter', sans-serif;
}

  3. امسحوا ذاكرات التخزين المؤقت في الإعدادات > التطوير > الأداء (/admin/config/development/performance).

  4. افتحوا صفحة في المنشئ وانظروا إلى عنصر نص.

استضافة الخط بأنفسكم

يتجنب الخط المستضاف ذاتيًا طلبًا لطرف ثالث، مما قد يهم قواعد الخصوصية.

  1. نزّلوا الخط بصيغة WOFF2 وضعوا الملفات في مجلد fonts/ الخاص بالقالب.

  2. أعلنوا كل وزن في css/custom.css، فوق القاعدة من الخطوة 2:

    @font-face {
  font-family: 'BrandFont';
  src: url('../fonts/brandfont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

  3. استخدموا 'BrandFont' في قواعد font-family الخاصة بكم وأزيلوا سطر Google من المكتبة وامسحوا ذاكرات التخزين المؤقت.

ما الذي ترونه

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

زر عائلة الخط في محرر النصوص مغلق افتراضيًا. وهو يسرد خطوط الويب الآمنة المعيارية في CKEditor، لا خطوطكم، فأبقوه مغلقًا لإبقاء المحرّرين ضمن العلامة.

قالب DXPR

يملك قالب DXPR إعدادات خطوط خاصة به. اذهبوا إلى المظهر وافتحوا إعدادات قالب DXPR (/admin/appearance/settings/dxpr_theme) ووسّعوا الخطوط. فهو يضبط الخط الأساسي والعناوين والتنقل واسم الموقع والاقتباس كلًا على حدة، فلا تحتاجون CSS لها.

إذا لم تروا الخط

  • ما زال النص يعرض الخط القديم. المكتبة غير محمّلة، أو تحمل ذاكرة التخزين المؤقت CSS القديم. تحققوا من أن mytheme.info.yml يسرد المكتبة، ثم امسحوا ذاكرات التخزين المؤقت في /admin/config/development/performance.
  • تحتفظ العناوين أو بعض المربعات بخط آخر. فقاعدة القالب لذلك العنصر أخص من body. افحصوا النص في المتصفح وأضيفوا منتقيه إلى قاعدتكم.
  • تعرض فقرة واحدة خطًا مختلفًا. طبّق محرّر عائلة الخط عليها. حدّدوا النص وانقروا إزالة التنسيق، ثم ألغوا تحديد عائلة الخط في الملف؛ انظر محرر النصوص.

ما الخطوة التالية؟