Google Fonts

Sie können jede der auf der Google Fonts-Plattform verfügbaren Schriftarten in Ihre Website einbetten. Obwohl diese Schriftarten nicht zur Schriftarten-Bibliothek hinzugefügt werden können und nicht im Inline-Text-Editor erscheinen, können sie über CSS auf diverse Elemente Ihrer Website angewendet werden.

Schriftart einbetten

  1. Öffnen Sie die von Ihnen benötigte Schriftart in Google Fonts und wählen Sie sie aus. Kopieren und speichern Sie im Popup-Fenster die Codezeilen @import url und font-family:

    Wichtig: Kopieren Sie unter „Embed code“ (Einbettungs-Code) nicht den gesamten Code-Ausschnitt einschließlich der <style></style>-Tags. Kopieren Sie einfach die Zeile „@import url“.

  2. Öffnen Sie im Entwicklermodus das Website HTML/CSS > site.css und fügen Sie den „@import url“-Code ein:

Die Schriftart über CSS anwenden

Um die von Ihnen eingebettete Schriftart als globale Schriftart für Ihre Website festzulegen, fügen Sie die folgende CSS-Zeile in die site.css ein. Weitere Informationen zum Hinzufügen benutzerdefinierter CSS finden Sie unter Entwicklermodus.

"*#dm div.dmContent *, *#dm div.dmFooter *, *#dm div.dm-title {IHR_GOOGLE_INTEGRATIONS_CODE}"

Ersetzen Sie IHR_GOOGLE_INTEGRATIONS_CODE oben durch den CSS-Code der Schriftfamilie, den Sie aus Google Fonts kopiert haben. Klicken Sie auf Speichern.

Die Schriftart auf ein bestimmtes Widget anwenden

So wenden Sie eine Schriftart auf ein einzelnes Widget an:

  1. Klicken Sie mit der rechten Maustaste auf das Widget und klicken Sie auf HTML/CSS bearbeiten, um das HTML/CSS-Bearbeitungsfenster des Widgets zu öffnen.
  2. Fügen Sie den CSS-Code der Schriftfamilie, den Sie in Schritt 2 oben zwischen den Klammern { } unter allgemeinem oder gerätespezifischen CSS gespeichert haben, hinzu.

Die Schriftart wird nun auf die Textelemente des Widgets angewendet, und Sie können den Inline-Editor verwenden, um wie gewohnt die Farben zu ändern und den Text zu bearbeiten.

Schriftart auf bestimmte globale Website-Schriften anwenden

Um Ihre benutzerdefinierten Schriften global anzuwenden, müssen Sie die spezifischen CSS-Elemente durch Ihren benutzerdefinierten Schriftnamen ersetzen. Um dies zu tun:

  1. Klicken Sie in der Navigationsleiste auf die Schaltfläche Entwicklermodus.
  2. Klicken Sie auf Webseiten HTML/CSS und dann auf site-theme.css.
  3. Suchen Sie nach der bestimmten Überschrift oder Schriftklasse, die Sie ändern möchten (z. B. H1, H2 usw.), und ersetzen Sie die aktuelle Schriftfamilie durch Ihren benutzerdefinierten Schriftnamen.
  4. Klicken Sie auf Speichern.
  5. Klicken Sie auf Schließen, um den Entwicklermodus zu schließen.