Mit dieser @font-faceRegel können benutzerdefinierte Schriftarten auf eine Webseite geladen werden. Nach dem Hinzufügen zu einem Stylesheet weist die Regel den Browser an, die Schriftart von dem Ort herunterzuladen, an dem sie gehostet wird, und sie dann wie im CSS angegeben anzuzeigen.
Ohne die Regel beschränken sich unsere Designs auf die Schriftarten, die bereits auf dem Computer eines Benutzers geladen sind und je nach verwendetem System variieren. Hier ist eine schöne Aufschlüsselung der vorhandenen Systemschriftarten.
Tiefstmögliche Browserunterstützung
Dies ist die Methode mit der derzeit tiefstmöglichen Unterstützung. Die @font-faceRegel sollte vor allen Stilen zum Stylesheet hinzugefügt werden.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Verwenden Sie es dann, um Elemente wie folgt zu stylen:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktische Browserunterstützung
Die Dinge verschieben sich stark in Richtung WOFF und WOFF 2, so dass wir wahrscheinlich davonkommen können mit:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3,6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Etwas tiefere Browser-Unterstützung
Wenn Sie eine Art fröhliches Medium zwischen vollständiger Unterstützung und praktischer Unterstützung benötigen, werden hier einige weitere Grundlagen behandelt:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Super Progressive Browser-Unterstützung
Wenn wir die Farm auf WOFF setzen, können wir erwarten, dass sich die Dinge irgendwann in Richtung WOFF2 verschieben. Das heißt, wir können auf dem neuesten Stand leben mit:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Nein | 35+ mit Flagge | 23+ | Nein | 37 | Nein |
Alternative Techniken
@import
Während @font-facees sich hervorragend für Schriftarten eignet, die auf unseren eigenen Servern gehostet werden, kann es Situationen geben, in denen eine gehostete Schriftartenlösung besser ist. Google Fonts bietet dies als Möglichkeit, ihre Schriftarten zu verwenden. Im Folgenden finden Sie ein Beispiel für @importdas Laden der Open Sans-Schriftart aus Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Dann können wir damit Elemente stylen:
body ( font-family: 'Open Sans', sans-serif; )Wenn Sie die URL für die Schriftart öffnen, können Sie tatsächlich alle @font-faceArbeiten hinter den Kulissen sehen.
Ein Vorteil der Verwendung eines gehosteten Dienstes besteht darin, dass wahrscheinlich alle Variationen der Schriftdateien enthalten sind, wodurch eine umfassende browserübergreifende Kompatibilität gewährleistet wird, ohne dass alle diese Dateien selbst gehostet werden müssen.
Benutzerdefinierte Schriftarten von CSS-Tricks (@ css-Tricks) auf CodePen finden Sie im Stift Verwenden von @import.
ein Stylesheet
In ähnlicher Weise können Sie im HTML-Dokument und nicht im CSS eine Verknüpfung zu demselben Asset wie zu jeder anderen CSS-Datei herstellen . Mit demselben Beispiel aus Google Fonts würden wir Folgendes verwenden:
Dann können wir unsere Elemente wie die anderen Methoden stylen:
body ( font-family: 'Open Sans', sans-serif; )Auch hier werden die @font-faceRegeln importiert , aber anstatt sie in unser Stylesheet einzufügen, werden sie stattdessen unserem HTML-Code hinzugefügt .
Benutzerdefinierte Schriftarten von CSS-Tricks (@ css-Tricks) auf CodePen finden Sie im Stift Verwenden.
Es geht um dasselbe… beide Techniken laden die benötigten Assets herunter.
Grundlegendes zu Schriftdateitypen
Das Original-Snippet oben in diesem Beitrag verweist auf viele Dateien mit seltsamen Erweiterungen. Lassen Sie uns jeden einzelnen durchgehen und besser verstehen, was sie bedeuten.
WOFF / WOFF2
Steht für: Web Open Font Format.
WOFF-Schriftarten wurden für die Verwendung im Web erstellt und von Mozilla in Zusammenarbeit mit anderen Organisationen entwickelt. Sie werden häufig schneller als andere Formate geladen, da sie eine komprimierte Version der Struktur verwenden, die von OpenType- (OTF) und TrueType- (TTF) Schriftarten verwendet wird. Dieses Format kann auch Metadaten und Lizenzinformationen in der Schriftartdatei enthalten. Dieses Format scheint der Gewinner zu sein und alle Browser steuern zu.
WOFF2 ist die nächste Generation von WOFF und bietet eine bessere Komprimierung als das Original.
SVG / SVGZ
Steht für: Skalierbare Vektorgrafiken (Schriftart)
SVG ist eine Vektor-Neuerstellung der Schriftart, die die Dateigröße erheblich verringert und sich ideal für den mobilen Einsatz eignet. Dieses Format ist das einzige, das in Version 4.1 und niedriger von Safari für iOS zulässig ist. SVG-Schriftarten werden derzeit von Firefox, IE oder IE Mobile nicht unterstützt. Firefox hat die Implementierung auf unbestimmte Zeit verschoben, um sich auf WOFF zu konzentrieren.
SVGZ ist die komprimierte Version von SVG.
EOT
Steht für: Embedded Open Type.
Dieses Format wurde von Microsoft (den ursprünglichen Innovatoren von @font-face) erstellt und ist ein proprietärer Dateistandard, der nur vom IE unterstützt wird. Tatsächlich ist es das einzige Format, das IE8 und niedriger bei der Verwendung erkennen @font-face.
OTF / TTF
Steht für: OpenType Font und TrueType Font.
Das WOFF-Format wurde ursprünglich als Reaktion auf OTF und TTF erstellt, teilweise weil diese Formate leicht (und illegal) kopiert werden konnten. OpenType verfügt jedoch über Funktionen, an denen viele Designer interessiert sein könnten (Ligaturen und dergleichen).
Ein Hinweis zur Leistung
Web-Schriftarten eignen sich hervorragend für das Design, es ist jedoch wichtig, auch deren Auswirkungen auf die Webleistung zu verstehen. Benutzerdefinierte Schriftarten führen häufig zu Leistungseinbußen bei Websites, da die Schriftart heruntergeladen werden muss, bevor sie angezeigt wird.
Ein häufiges Symptom war ein kurzer Moment, in dem Schriftarten zuerst als Fallback geladen und dann zur heruntergeladenen Schriftart blinken. Paul Irish hat einen älteren Beitrag dazu (genannt "FOUT": Flash Of Unstyled Text).
Heutzutage verstecken Browser den Text im Allgemeinen, bevor die benutzerdefinierte Schriftart standardmäßig geladen wird. Besser oder schlechter? Du entscheidest. Sie können dies durch verschiedene Techniken steuern. Ein wenig außerhalb des Rahmens für diesen Artikel, aber hier ist eine Trifecta von Artikeln von Zach Leatherman, um Ihnen den Einstieg in das Kaninchenloch zu erleichtern:
- Better @ font-face mit Font Load Events
- Wie wir verantwortungsbewusst mit Web-Schriftarten umgehen oder eine @ font-face-palm vermeiden
- Flash of Faux Text - noch mehr zum Laden von Schriftarten
Im Folgenden finden Sie einige weitere Überlegungen zur Implementierung benutzerdefinierter Schriftarten:
Beobachten Sie die Dateigröße
Schriftarten können überraschend schwer sein. Neigen Sie daher zu Optionen, die leichtere Versionen bieten. Bevorzugen Sie beispielsweise einen Schriftartensatz mit 50 KB gegenüber einem mit 400 KB.
Begrenzen Sie den Zeichensatz nach Möglichkeit
Benötigen Sie wirklich die fetten und schwarzen Gewichte für eine Schriftart? Es ist eine gute Idee, die Schriftsätze so zu beschränken, dass nur das verwendet wird, was verwendet wird. Hier finden Sie einige gute Tipps.
Betrachten Sie Systemschriftarten für kleine Bildschirme
Viele Geräte stecken in beschissenen Verbindungen fest. Ein Trick könnte darin bestehen, größere Bildschirme beim Laden der benutzerdefinierten Schriftart mit zu verwenden @media.
In diesem Beispiel wird Bildschirmen mit einer Größe von weniger als 1000 Pixel stattdessen eine Systemschriftart und Bildschirmen mit einer Breite von mehr als 1000 Pixel die benutzerdefinierte Schriftart zugewiesen.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Schriftarten
Es gibt eine Reihe von Diensten, die Schriftarten hosten und den Zugriff auf kommerziell lizenzierte Schriftarten ermöglichen. Die Vorteile der Nutzung eines Dienstes bestehen häufig darin, dass eine große Auswahl an legalen Schriftarten effizient bereitgestellt wird (z. B. auf einem schnellen CDN).
Hier sind einige gehostete Schriftdienste:
- Wolkentypographie
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typothek
- Fonts.com
- Google Fonts
- Schrift Eichhörnchen
Was ist mit Symbolschriftarten?
Es ist wahr, @ font-face kann eine Schriftartdatei voller Symbole laden, die für ein Symbolsystem verwendet werden können. Ich denke jedoch, dass Sie SVG als Symbolsystem weitaus besser nutzen können. Hier ist ein Vergleich der beiden Methoden.
Mehr Ressourcen
- Grundlagen der Google Font API
- CSS-Schriftfamilien