Webfonts sind Schriftarten, die nicht bereits auf dem Betriebssystem eines Benutzers installiert sind, sondern zur Nutzung im Web gehostet und vom Browser heruntergeladen werden. Diese bieten Ihnen die Flexibilität, jede beliebige Schriftart zu verwenden, solange Sie diese als Schriftdateien bereitstellen (entweder eine URL oder ein Dateipfad). Diese Schriftarten sind häufig lizenziert, was bedeutet, dass ein Kunde das Recht erwerben muss, die Schriftarten auf seiner Website zu verwenden.

Es gibt zwei Arten von Schriftarten, die Sie zu Search hinzufügen können:

1. Von einem Schriftarten-Dienstanbieter gehostete Schriftarten, wie Google Fonts und Adobe Fonts, die kostenlos sind und keine Lizenz erfordern.
   1. Sie erhalten von Ihrem Hosting-Provider ein Code-Snippet, das sowohl die Schrift-Assets selbst als auch die Font-Face-Deklarationen für Sie enthält. Dies wird in Form eines Stylesheets erfolgen – wie unten referenziert, wobei das href die Komponente ist, die auf die externen Schriftarten verweist.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&display=swap">

2. Selbst gehostete Schriftarten – in der Regel Ihre proprietären Schriftarten, falls zutreffend.
   1. Dies sind Schriftdateien, die Sie in der Search hochladen.
   2. Die akzeptierten Format-Typen sind:
      • WOFF (Web Open Font Format)
        • Empfohlen, da sie komprimiert sind, um eine bessere Übertragung bei schlechten Internetverbindungen zu ermöglichen, und im Allgemeinen von verschiedenen Browsertypen unterstützt werden.
      • WOFF2
      • TTF (TrueType)
      • OTF (OpenType)
      • EOT (Embedded OpenType)
      • SVG (Scalable Vector Graphics)

So fügen Sie Ihren Websites Webfonts hinzu:

1. Klicken Sie in der Navigationsleiste auf Pages und dann auf die gewünschte Website.
2. Klicken Sie auf die Schaltfläche Code-Editor anzeigen.
3. Bewegen Sie den Mauszeiger über den Master Teilbereich und klicken Sie auf das angezeigte Stiftsymbol ().
4. Fügen Sie die Schriftarten zu Ihrem Code-Editor hinzu. Dieser Vorgang ist je nach Hosting der Schriftarten unterschiedlich. Bitte befolgen Sie die entsprechenden Schritte:
   • Schriftarten, die von einem Schriftarten-Dienstanbieter gehostet werden
     1. Klicken Sie auf den Ordner Layouts.
     2. Klicken Sie auf die Datei headincludes.hbs.
     3. Fügen Sie Ihre gewünschten Schriftarten-Skripte zur Datei hinzu.
   • Selbstgehostete Schriften
     1. Klicken Sie auf den Ordner static.
     2. Klicken Sie auf den Ordner assets.
     3. Bewegen Sie den Mauszeiger über den fonts-Ordner, klicken Sie auf die drei Punkte (...), die erscheinen, und klicken Sie im Dropdown-Menü auf Datei hinzufügen. Es erscheint ein Dialogfeld.
     4. Wählen Sie im Dropdown-Menü Vorhandene Datei hochladen aus.
     5. Klicken Sie auf Datei auswählen und wählen Sie die Datei von Ihrem Computer aus. Klicken Sie dann auf Datei hinzufügen.
        • Wenn Sie mehr als eine Datei hinzufügen möchten, wiederholen Sie die Schritte c bis e. Beachten Sie, dass Sie für jede Schriftartvariante (z. B. regulär, fett und kursiv) eine Datei hochladen müssen.
     6. Klicken Sie auf den Ordner scss unter dem Ordner static.
     7. Klicken Sie auf die Datei fonts.scss.
     8. Fügen Sie Ihre gewünschten Schriftartdeklarationen oben in der Datei hinzu.
        • Sie müssen für jede hochgeladene Variante/Datei eine Schriftartdeklaration hinzufügen – in diesem Fall normal, fett und kursiv.
        •  src bezieht sich auf den Dateipfad zu den Dateien, die Sie gerade in Ihren fonts-Ordner hochgeladen haben.

@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-regular-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-bold-webfont.woff') format("woff");
  font-weight: $font-weight-bold;
  font-style: normal;
}
@font-face
{
  font-family: "Robot Mono";
  src: url('../assets/fonts/robotomono-italic-webfont.woff') format("woff");
  font-weight: $font-weight-normal;
  font-style: italic;
}

5. Wenden Sie Ihre neue Schriftart auf Ihre Search-Erfahrung an. Lesen Sie den Hilfeartikel „Schriften im Search Frontend Theme ändern“, um mehr zu erfahren.