Implementieren Sie benutzerdefinierte Schriftarten in Ihrer Drupal 8 Website

Es gibt Millionen von Websites im Internet, aber nur wenige werden Sie ansprechen. Neben vielen anderen Faktoren sind Schriftarten für eine bessere Lesbarkeit verantwortlich. Tatsächlich ist Helvetica laut verschiedenen Studien eine der am häufigsten verwendeten benutzerdefinierten Schriftarten. Typografie ist ein weiteres Schlachtfeld.

Sie können aber auch benutzerdefinierte Schriftarten verwenden. Benutzerdefinierte Schriftarten tragen dazu bei, der Website einen einzigartigen Stil und Charakter zu verleihen. Minimalistische benutzerdefinierte Schriftarten helfen auch bei der Performance der Website.

Einbetten einer Online- oder externen Schriftartquelle

Diese Methode erstellt einen Link zu einer externen Quelle, sodass die Schriftarten nicht heruntergeladen, sondern verlinkt werden. Sehen wir uns an, wie wir solche Schriftarten implementieren können.

Wir werden dies anhand von Google Fonts demonstrieren. Als Erstes müssen wir unsere gewünschte Schriftart finden. In diesem Fall verwenden wir die Schriftart Lato.

Klicken Sie nun auf die Schaltfläche Select This (Diese auswählen), wodurch sich ein Auswahlfenster öffnet. Kopieren Sie dann den folgenden Link und betten Sie ihn ein, wie in der Abbildung unten hervorgehoben.

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

Navigieren Sie zum Theme-Ordner und fügen Sie die folgende Zeile in die Datei info.yml ein, wie gezeigt.
-customtheme/fonts

Öffnen Sie die Datei libraries.yml und fügen Sie den zuvor kopierten Einbettungslink ein, nehmen Sie jedoch die erforderlichen Änderungen vor, sodass die Struktur des Links der unten gezeigten ähnelt.

Beschreiben Sie abschließend in der Datei style.css die Eigenschaften der Schriftart und leeren Sie den Cache, damit die Schriftart wirksam wird.

Verknüpfen mit einer Offline-/internen Schriftartquelle

In dieser Methode werden wir verstehen, wie wir heruntergeladene Schriftarten auf unserer Website einbinden können. Dazu müssen wir lediglich minimale Änderungen an der Datei style.css vornehmen. Wir müssen das Schlüsselwort font-face verwenden, wie unten gezeigt:

@font-face{
src:url(fonts/Lato-Regular.ttf);
font-family: sans-serif;
Module verwenden:

Font-your-face: Font-your-face verwendet eine Schnittstelle zur einfachen Implementierung benutzerdefinierter Schriftarten auf einer Website. Sehen wir uns an, wie wir mit dem Modul Font-your-face die mit Drupal gebündelten Standardschriftarten ändern und die gewünschten benutzerdefinierten Schriftarten verwenden können.

Die Installation des Moduls Font-your-face erfordert eine normale Installation des Moduls. Um auf das Konfigurationsfenster dieses Moduls zuzugreifen, klicken Sie auf die Registerkarte Darstellung, wodurch die Registerkarte Font-your-face angezeigt wird.

Durchsuchen: Der Abschnitt Durchsuchen enthält alle heruntergeladenen Schriftarten, die für die Implementierung auf der Website verfügbar sind.

Schriftartanzeige: Dieser Abschnitt wird verwendet, um Schriftartprofile zu erstellen, die benutzerdefinierte Beschriftungen, den zu verwendenden Schriftstil, Fallback-Schriftarten für den Fall, dass die benutzerdefinierten Schriftarten nicht geladen werden können, voreingestellte Selektoren, die die von den Schriftarten betroffenen Abschnitte definieren, und die Themes unterstützen, mit denen die Schriftarten funktionieren.

Benutzerdefinierte Schriftarten: In diesem Abschnitt kann der Benutzer Schriftarten direkt aus dem Internet oder anderen Quellen im .woff-Format (Web Open Font Format) herunterladen und auf seinen Websites verwenden.

Einstellungen: Auf der Registerkarte Einstellungen können wir benutzerdefinierte Schriftarten importieren, indem wir einen Schriftartanbieter aus der Liste auswählen.

Was ist ein API-Token?
API-Token ermöglichen Anwendungen den Zugriff auf Ihr Typekit-Konto, einschließlich des Erstellens neuer Kits und des Bearbeitens der bereits erstellten Kits.

Vor- und Nachteile

1. Online-/Externe Methode
    
   • Vorteile:
     • Schnelles Laden: Diese Methode führt zu schnelleren Ladezeiten, da Ressourcen direkt heruntergeladen und die erforderlichen Ressourcen geladen werden.
     • Wird geladen: Die benutzerdefinierten Schriftarten werden immer korrekt geladen, da die Dateien nicht lokal gespeichert werden und daher die Wahrscheinlichkeit, dass diese Dateien beschädigt werden, sehr gering ist.
     • Keine fehlenden Dateien: Da die Schriftartdateien webgehostet sind, ist die Möglichkeit fehlender Dateien nahezu ausgeschlossen.
        
   • Nachteile
     • Keine Verbindung = Keine Schriftarten: Wenn keine Verbindung hergestellt wird, gibt es ein Problem mit dem Nichtladen der Schriftarten.
     • Langsames Laden: Verbindungen mit geringerer Bandbreite führen wahrscheinlich zu längeren Ladezeiten.
     • Kompliziert: Dieser Prozess ist für Neulinge etwas kompliziert, da eine Menge Code implementiert werden muss, damit er funktioniert.
        
2. Offline-/Interne Methode
    
   • Vorteile:
     • Keine Verbindung = Kein Problem: Eine Verbindung zum Schriftartanbieter ist nicht erforderlich, da die Schriftarten bereits verfügbar sind.
     • Einfach: Die Implementierung dieser Methode ist aufgrund der minimalen Codierung recht einfach.
     • Verfügbarkeit: Die Schriftarten sind immer verfügbar, da ihre Entfernung durch den Anbieter aus dem Inventar sie in keiner Weise beeinträchtigt, da die Schriftartdatei immer verfügbar ist.
        
   • Nachteile:
     • Beschädigte Schriftartdateien: Schriftartdateien können beschädigt werden und daher nicht geladen werden.
     • Längere Ladezeiten: Serverausfallzeiten wirken sich negativ auf die Ladezeit der Website aus, da die Schriftartdateien auch vom selben Server geladen werden müssen.

Ein Administrator muss alle beteiligten Faktoren berücksichtigen, wenn er benutzerdefinierte Schriftarten auf seinen Websites implementiert. Lassen Sie mich in den Kommentaren unten wissen, welche benutzerdefinierte Schriftart Sie verwendet haben.