@font-face ist eine CSS-Regel, die die Darstellung von Schriftarten auf Webseiten im Internet ermöglicht. Bevor es diese Regel gab, konnten Webmaster nur eine begrenzte Anzahl von Schriftarten auf ihren Websites verwenden, die am weitesten verbreitet und auf den Computern der Nutzer installiert sind. Mit der Einführung von @font-face kann nun jede beliebige Schriftart auf einer Website verwendet werden.
Wenn Sie die Schriftart auf unserer Website heruntergeladen haben, finden Sie im Archiv mit den Schriftarten einen fertigen CSS-Code, den Sie kopieren und in das dem Projekt beigefügte CSS-Dokument einfügen müssen.
Schritt-für-Schritt-Installation
1. Wählen Sie die gewünschte Schriftart aus und klicken Sie auf "für die Website herunterladen".
2. Erstellen Sie im Stammverzeichnis Ihrer Website einen Ordner fonts, und kopieren Sie die heruntergeladenen Schriften.
Öffnen Sie Ihr CSS-Dokument und kopieren Sie den Inhalt der Textdatei aus dem Archiv in das Dokument.
4. Vergewissern Sie sich, dass der Pfad zum Schriftartenordner richtig geschrieben ist. Je nach der Position des Ordners, in dem sich die Schriftarten befinden, kann der Pfad einen oder mehrere Punkte enthalten.
5. Erledigt. Kopieren Sie die Eigenschaft mit dem Familiennamen und fügen Sie sie in den Selektor ein, für den Sie die Stile schreiben.
Was ist, wenn ich die Schriftart bereits anderswo heruntergeladen habe und sie einfügen möchte?
In diesem Fall müssen Sie einen Schriftkonverter im Internet finden und Ihre ttf-Schrift (oder otf) in die richtigen Formate umwandeln, nämlich eot, svg, woff und woff2. Dadurch wird sichergestellt, dass die Schriftart in allen Browsern und auf mobilen Geräten korrekt angezeigt wird und funktioniert.
Sie müssen dann die @font-face-Regel selbst buchstabieren und dabei die Syntax beachten.
Die Syntax für @font-face
Die Syntax der Regel lässt sich grob in grundlegende Eigenschaften und erweiterte Eigenschaften unterteilen.
Basic:
- font-family - gibt den Namen der Schriftart an.
- src - gibt den Pfad der Schriftart an. Dabei kann es sich um die URL der Schriftart auf dem Server Ihrer Website, um URLs von Schriftarten auf dem Server eines anderen Anbieters (z. B. Google Fonts) oder einfach um den Namen der Schriftart auf dem Computer des Benutzers (Helvetica New Bold, Tahoma, Georgia usw.) handeln.
Erweitert:
- font-display - bestimmt, wie die Schriftart erscheint, je nachdem, ob sie heruntergeladen wurde und einsatzbereit ist.
- font-stretch - ermöglicht es Ihnen, die Breite des Textes anzupassen.
- font-style - bestimmt, ob die Schriftart einfach, kursiv oder schräg ist (die beiden letzteren sind nicht dasselbe).
- font-weight - Stellt die Sättigung der Schrift ein, auf einer Skala von 100 bis 900 (100-small, 900-small).
- font-variant - bestimmen Sie, wie die Kleinbuchstaben dargestellt werden sollen - lassen Sie sie unverändert oder machen Sie sie ganz klein (Großbuchstaben).
- font-feature-settings - ermöglicht es Ihnen, erweiterte typografische Funktionen in OpenType-Schriften zu verwalten.
- font-variations-settings - ermöglicht die Steuerung von Variationen von Open Type- und TrueType-Schriften auf niedriger Ebene durch die Angabe von Achsennamen mit vier Buchstaben.
- unicode-range - gibt den Bereich der Unicode-Codes (Glyphen) an, die in der Schriftart verwendet werden sollen.
Verbinden Sie eine Schriftart mit Ihrer Website mit Google Fonts
Google Fonts ist der einfachste Weg, um eine Schriftart mit Ihrer Website zu verbinden. Gehen Sie auf die Website von Google Fonts, suchen Sie die gewünschte Schriftart, wählen Sie die richtige Schriftart für die Installation aus und kopieren Sie den Code.
Der kopierte Code sollte in den Body des Head-Tags auf Ihrer HTML-Seite eingefügt werden.
Der Nachteil dieser Methode besteht darin, dass die Schriftarten nicht angezeigt und durch Standardschriften ersetzt werden, wenn während der Erstellung der Website die Internetverbindung unterbrochen wird, da die Dateien nicht auf dem lokalen Computer, sondern auf den Google-Servern gespeichert sind. Außerdem besteht die Möglichkeit, dass das Problem erneut auftritt, wenn Sie dem Kunden das Layout präsentieren (oder nur zur Bestätigung) und er kein Wi-Fi hat.
