خطوط Google

مكون السمة
,
1
:discourse2: Summary Google Fonts is a simple theme component that allows you to add a font from Google Fonts without writing any CSS.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-google-font-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

This component allows you to set the main site font, and optionally separate fonts for headlines and monospaced text (code blocks). You can also choose a font weight in each case, and increase the font size.

Behind the scenes this sets up a little bit of CSS along with Google’s font <link>. Note that this is relying on Google to serve the font files from https://fonts.googleapis.com/.

Settings

Name Description
fonts Add the name of the font(s) you want to use from fonts.google.com. Note that font names are CaSe SeNsiTivE!
body font The main font used throughout Discourse, must be included in “fonts” setting above
body font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
headline font Optional font for headlines, must be included in “fonts” setting above
headline font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
monospaced font Optional font for code blocks, must be included in “fonts” setting above.
monospaced font weight Font thickness in the range of 100-900. 400 is normal, 700 is bold
normal font size Default font size for all users, adjusting this will adjust all font sizes proportionately
smaller font size Selectable in each user’s interface preferences
larger font size Selectable in each user’s interface preferences
largest font size Selectable in each user’s interface preferences

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @awesomerobot 2025-03-14T15:46:34Z

Check documentPerform check on document:
50 إعجابًا
4

This Fantastic! Can this be installed Multiple Times to link to different themes by changing it’s Name in Advanced install?

5

I don’t see why not. We’ve installed the same theme twice, for example here on Meta to have both a light and dark version.

3 إعجابات
6

Thanks. Forgot you can rename it to identify/link it to other themes.

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

Thank you. I love it. :grin:

3 إعجابات
9

Thanks :heart: I really love it.

21

لقد اكتشفت للتو أن هذه المكونة لا تعمل مع صفحات /pub/ (المنشورة). الخطوط لا يتم تحميلها في هذه الصفحات مما يؤدي إلى خط افتراضي يشبه Times New Roman.

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

أرى أيضًا الخطوط الافتراضية، ولكن في صفحة تنشيط الحساب على الرابط التالي:

https://yoursite.org/u/activate-account/...

23

لقد حاولت وهذا بالفعل مشكلة.

تحاول الصفحة المنشورة تحميل خط جوجل من خلال مكون السمة:

image

ملف الخط لا يتم تحميله على الصفحة المنشورة، ولا يعود إلى متغير عائلة الخط `Arial, sans-serif ويستخدم Times New Roman بدلاً من ذلك.

قد يكون هناك مجال للتحسين هنا طالما يمكن للصفحات المنشورة الوصول إلى التعديلات المطلوبة.

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

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

إعجابَين (2)
29

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

33

تقرير خطأ سريع: لاحظت للتو أنه عندما أقوم بتعيين وزن الخط، فإن النص الغامق لا يظهر كغامق.

لقد اختبرت هذا باستخدام خطوط Work Sans و Zilla Slab. قمت بتغيير وزن الخط من الافتراضي (400) إلى 300. عندما فعلت ذلك، لم يظهر النص الغامق كغامق. قمت بإعادة تعيين هذا الإعداد وعاد النص الغامق للظهور.

لقد قمت بتعيينه على 400 وانتهيت من ذلك، لكنني أردت إخبارك.

شكراً لعملك على هذا!

34

هل هناك طريقة للتعمق قليلاً في التفاصيل؟ يأتي خط “العنوان” بوزن 900 افتراضيًا مع العناوين داخل المواضيع. سيكون من الرائع تعيين القيم الافتراضية لكل من كائنات Markdown هذه.

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

يبدو أن هناك خطأ في هذا، على الأقل في منتدى الخاص بي، إذا أضفت الخط “Inter” مع هذا المكون فسيحدث ما يلي:

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

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

هل هذا خطأ معروف؟ هل هناك حل؟

شكرًا

إعجابَين (2)
37

لدينا Inter مدمجة بالفعل إذا كنت تريد تغيير خط الأساس وخط العنوان ضمن إعدادات الموقع ؛لا حاجة لمكون

إعجابَين (2)
38

أي إصدار من Discourse؟ أنا على الإصدار المستقر 3.3 ولا أرى Inter. أواجه نفس المشاكل التي يواجهها بعض المستخدمين هنا مع هذه المكونات.

أنا على الإصدار 3.3 وأريد استخدام Inter. بينما يتم تحميل الخط، فإن النص العريض ليس عريضًا.

39

ستحتاج إلى التحديث إلى الإصدار 3.4 لخيار “Inter” المدمج

إعجابَين (2)
40

لقد قمت للتو بدمج إعادة هيكلة لهذا المكون والتي تتماشى بشكل أفضل مع تحديثات Google Font — يجب أن يؤدي هذا إلى حل بعض المشكلات التي كان يواجهها الأشخاص مع عدم ظهور أوزان مختلفة.

لاحظ أن تنسيق الإعداد قد تغير قليلاً بحيث لم يعد من الممكن تضمين الأوزان في إعداد اسم الخط مثل Roboto:300,300i,500، ويجب تحديث هذا إلى Roboto بسيط… ولكن يجب أن يتم الترحيل تلقائيًا عند التحديث.

إعجابَين (2)