Um benutzerdefinierte Schriftarten in Drupal 8 hinzuzufügen, müssen Sie folgende Schritte ausführen:
1. Laden Sie die Schriftart-Dateien von einer vertrauenswürdigen Quelle herunter. Stellen Sie sicher, dass die Dateien im Web-geeigneten Format wie TTF, WOFF oder EOT vorliegen.
2. Erstellen Sie einen Ordner namens “fonts” in Ihrem Thema-Musterordner. Wenn der Ordner bereits vorhanden ist, überspringen Sie diesen Schritt.
3. Kopieren Sie die heruntergeladenen Schriftart-Dateien in den neu erstellten Ordner “fonts”.
4. Öffnen Sie die Datei “MYTHEME.libraries.yml” in Ihrem Thema-Musterordner. Falls die Datei noch nicht vorhanden ist, erstellen Sie diese.
5. Fügen Sie den folgenden Code in die Bibliothek hinzu:
custom-fonts: version: VERSION-NUMMER css: theme: css/font.css: {}
Ersetzen Sie “VERSION-NUMMER” durch eine Version, die Sie bestimmen möchten. Ersetzen Sie “MYTHEME” durch den Namen Ihres Themas. Erstellen Sie gegebenenfalls die Datei “font.css” im Ordner “css” Ihres Musterordners.
6. Fügen Sie den folgenden Code in die Datei “font.css” ein:
@font-face {
font-family: ‘NAME-IHRER-FONT’;
src: url(‘../fonts/NAME-IHRER-FONT.eot’);
src: url(‘../fonts/NAME-IHRER-FONT.eot?#iefix’) format(‘embedded-opentype’),
url(‘../fonts/NAME-IHRER-FONT.woff2’) format(‘woff2’),
url(‘../fonts/NAME-IHRER-FONT.woff’) format(‘woff’),
url(‘../fonts/NAME-IHRER-FONT.ttf’) format(‘truetype’),
url(‘../fonts/NAME-IHRER-FONT.svg#NAME-IHRER-FONT’) format(‘svg’);
font-style: normal;
font-weight: 400;
font-display: swap;
}
Ersetzen Sie jeden Vorkommen von “NAME-IHRER-FONT” durch den Dateinamen Ihrer Schriftart-Datei, jedoch ohne die Dateiendung. Beachten Sie, dass die Reihenfolge der Dateitypen auf den jeweiligen Browser abgestimmt ist.
7. Speichern Sie alle Dateien und aktualisieren Sie die Seiten in Ihrem Browser. Ihre benutzerdefinierte Schriftart sollte jetzt auf Ihrer Website angezeigt werden.
