Die Standardschriftart auf Ihrer Website ändern

[Discourse]

Diese Anleitung erklärt, wie Sie die Standardschriftart auf Ihrer Discourse-Seite ändern, entweder für bestimmte Elemente oder durch die Verwendung einer anderen Schriftbibliothek als Google Fonts.

Erforderliches Benutzerniveau: Administrator

Diese Anleitung ist nur erforderlich, wenn Sie sich in eine andere Schriftbibliothek als Google Fonts integrieren oder nur einige Elemente der Website ändern möchten. Wenn Sie Google Fonts verwenden und die Schriftart seitenweit ändern möchten, probieren Sie stattdessen diese Theme-Komponente aus: Google Fonts.

Diese Anleitung behandelt:

• Verwendung der integrierten Schrifteinstellungen
• Ändern der Seitenschriftart mit einer benutzerdefinierten Schriftart
• Anwenden verschiedener Schriftarten auf bestimmte Elemente

Integrierte Schrifteinstellungen

Discourse enthält eine integrierte Schriftauswahl mit einer Auswahl an gebündelten Schriftarten. Dies ist der einfachste Weg, die Schriftart Ihrer Seite ohne benutzerdefiniertes CSS zu ändern.

Navigieren Sie zu Admin > Appearance > Fonts (Admin > Darstellung > Schriftarten), um auf die Seite mit den Schrifteinstellungen zuzugreifen. Von hier aus können Sie Folgendes festlegen:

• Base font (Basisschriftart) — Wird für die meisten Texte auf der Seite verwendet (Standard: Inter)
• Heading font (Überschriftenschriftart) — Wird für Überschriften verwendet (Standard: Inter)
• Default text size (Standard-Textgröße) — Die Standard-Textgröße für alle Benutzer

Diese Einstellungen verwenden im Hintergrund die CSS-benutzerdefinierten Eigenschaften --font-family und --heading-font-family, die auch von Themes überschrieben werden können.

Ändern der Schriftart mit einer benutzerdefinierten Schriftart

Wenn Sie eine Schriftart verwenden möchten, die nicht in der integrierten Liste enthalten ist (z. B. von Google Fonts oder einer selbst gehosteten Schriftartdatei), können Sie dies über eine Theme-Komponente tun.

1. Eine neue Theme-Komponente erstellen

   Navigieren Sie zu Admin > Appearance > Themes & Components > Install > Create New (Admin > Darstellung > Themes & Komponenten > Installieren > Neu erstellen). Wählen Sie einen Namen und wählen Sie „Component“ (Komponente).

2. CSS/HTML bearbeiten

   Klicken Sie auf die Schaltfläche „Edit CSS/HTML“ (CSS/HTML bearbeiten).

   

3. Die Schriftart mit Google Fonts hinzufügen

   Wenn Sie eine Google-Webschriftart verwenden möchten, fügen Sie Folgendes zu Ihrem Tab Common > CSS hinzu:

   @import url(https://fonts.googleapis.com/css?family=Oswald);
   
   html {
       --font-family: 'Oswald', sans-serif;
       --heading-font-family: 'Oswald', sans-serif;
   }
   

   Stellen Sie sicher, dass die Zeile @import url am Anfang des Stylesheets platziert wird.

   In diesem Beispiel ist Oswald der Name der Schriftart.

   Wenn es ein Problem mit der @import url-Methode gibt, können Sie alternativ die <link>-Methode verwenden, indem Sie die entsprechende Zeile in den Tab Common > /head Ihrer Theme-Komponente einfügen:

   <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
   

   Diese Methode ändert die Seitenschriftart seitenweit.

4. Schriftarten auf bestimmte Elemente anwenden
   Sie können die Seitenschriftart auch nur für einige Elemente ändern.

   Um die Schriftart nur für einige Elemente, wie die Navigationsleiste oder Thementitel, zu ändern, fügen Sie hinzu:

   @import url('https://fonts.googleapis.com/css?family=Oswald:200,300');
   
   .navigation-container, .link-top-line {
       font-family: 'Oswald', sans-serif;
   }
   

   

   Alternativ können Sie, um die Schriftart einer bestimmten Kategorie zu ändern, Folgendes verwenden:

   body.category-CATEGORY-NAME {
       font-family: 'YOUR-NEW-FONT';
   }
   

5. Die neue Komponente zu Haupt-Themes hinzufügen

   Stellen Sie sicher, dass Sie die neu erstellte Theme-Komponente zu allen Haupt-Themes hinzufügen, die Benutzer auswählen können: