Der @font-face-Befehl ermöglicht es, benutzerdefinierte Schriften auf einer Webseite zu laden. Sobald er zu einem Stylesheet hinzugefügt wird, fordert der Befehl den Browser auf, die Schriftart von ihrem Hosting-Ort herunterzuladen und sie gemäß den CSS-Anweisungen anzuzeigen.
Ohne diese Regel sind unsere Designs auf die Schriftarten beschränkt, die bereits auf dem Computer des Benutzers installiert sind, und diese variieren je nach verwendetem System. Hier sehen wir eine gute Übersicht über vorhandene Systemschriften.
Allgemeine Browserunterstützung
Praktische Ebene der Browserunterstützung
Die Unterstützung für WOFF und WOFF 2 nimmt stark zu, daher können wir wahrscheinlich Folgendes verwenden:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
}Heutzutage können Sie wahrscheinlich auch nur WOFF2 verwenden:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
}Der einzige praktische Grund, WOFF zusätzlich zu verwenden, besteht darin, die Unterstützung für Internet Explorer 11 zu gewährleisten.
Tiefstmögliche Browserunterstützung
Dies ist die Methode mit der derzeit tiefsten Unterstützung. Die @font-face-Regel sollte dem Stylesheet vor allen anderen Stilen 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 gestalten:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Etwas tiefere Browserunterstützung
Wenn Sie eine Art Kompromiss zwischen vollständiger Unterstützung und praktischer Unterstützung benötigen, können Sie eine .ttf-Datei hinzufügen:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}Alternative Techniken
@import
Obwohl @font-face ideal für Schriften ist, die auf unseren eigenen Servern gehostet werden, gibt es Situationen, in denen eine gehostete Schriftlösung besser ist. Google Fonts bietet dies als Möglichkeit zur Verwendung eigener Schriften an. Hier ist ein Beispiel für die Verwendung von @import, um die Schriftart Open Sans von Google Fonts zu laden:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Dann können wir es verwenden, um Elemente zu gestalten:
body {
font-family: 'Open Sans', sans-serif;
}Wenn Sie die URL der Schriftart öffnen, können Sie tatsächlich die ganze Arbeit sehen, die hinter den Kulissen mit @font-face geleistet wird.
Ein Vorteil der Verwendung eines gehosteten Dienstes besteht darin, dass wahrscheinlich alle Schriftartenvarianten enthalten sind, was eine tiefe Cross-Browser-Kompatibilität gewährleistet, ohne alle diese Dateien selbst hosten zu müssen.
eines Stylesheets
Alternativ könnten Sie dieselbe Ressource verlinken wie jede andere CSS-Datei, und zwar innerhalb des HTML-Dokuments anstelle des CSS. Unter Verwendung desselben Beispiels von Google Fonts würden wir Folgendes verwenden:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">Dann können wir unsere Elemente wie bei den anderen Methoden gestalten:
body {
font-family: 'Open Sans', sans-serif;
}Auch hier werden die @font-face-Regeln importiert, jedoch anstelle von Injektion in unser Stylesheet werden sie unserem HTML hinzugefügt.
Es ist im Grunde dasselbe… beide Techniken laden die benötigten Ressourcen.
Verständnis der Schriftarten-Dateitypen
Die ursprüngliche Passage am Anfang des Beitrags enthält Verweise auf viele Dateien mit merkwürdigen Erweiterungen. Lassen Sie uns jeden einzelnen überprüfen und ein besseres Verständnis dafür entwickeln, was sie bedeuten.
WOFF / WOFF2
Steht für: Web Open Font Format.
Speziell für die Verwendung im Web entwickelt und von Mozilla in Zusammenarbeit mit anderen Organisationen entwickelt, laden WOFF-Schriften oft schneller als andere Formate, da sie eine komprimierte Version der Struktur der OpenType (OTF)- und TrueType (TTF)-Schriften verwenden. Dieses Format kann auch Metadaten und Lizenzinformationen in der Schriftdatei enthalten. Dieses Format ist der Sieger und darauf steuern alle Browser 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 vektorbasierte Nachbildung der Schriftart, die viel kleiner in der Dateigröße ist und sich daher ideal für den mobilen Einsatz eignet. Dieses Format ist das einzige, das von Safari für iOS bis zur Version 4.1 und niedriger erlaubt ist. SVG-Schriften werden derzeit nicht von Firefox, IE oder IE Mobile 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 von IE unterstützt wird. Tatsächlich ist es das einzige Format, das von IE8 und älteren Versionen erkannt wird, wenn @font-face verwendet wird.
OTF / TTF
Steht für: OpenType-Schrift und TrueType-Schrift.
Das WOFF-Format wurde ursprünglich als Reaktion auf OTF und TTF entwickelt, unter anderem weil diese Formate leicht (und illegal) kopiert werden konnten. OpenType bietet jedoch Funktionen, die für viele Designer interessant sein könnten (wie Ligaturen und Ähnliches).
Ein Hinweis zur Leistung
Web-Schriften sind großartig für das Design, aber es ist auch wichtig, ihre Auswirkungen auf die Leistung zu verstehen. Benutzerdefinierte Schriften führen oft zu einer Leistungseinbuße, da die Schriftart heruntergeladen werden muss, bevor sie angezeigt wird.
Ein häufiges Problem war früher ein Moment, in dem die Schriften zunächst als Ersatz geladen wurden und dann zur heruntergeladenen Schriftart wechselten. Paul Irish hat einen älteren Beitrag dazu (namens “FOUT”: Flash of Unstyled Text).
Heutzutage verstecken die Browser den Text in der Regel standardmäßig, bevor die benutzerdefinierte Schriftart geladen ist. Besser oder schlechter? Sie entscheiden. Sie können dies durch verschiedene Techniken etwas kontrollieren. Das geht etwas über den Rahmen dieses Artikels hinaus, aber hier sind drei Artikel von Zach Leatherman, um Sie auf den richtigen Weg zu bringen:
- Besseres @font-face mit Font Load Events
- Wie wir Web-Schriften verantwortungsbewusst verwenden oder einen @font-face-Palm vermeiden
- Flash of Faux Text – noch mehr zum Thema Schriftartenladen
Hier sind einige weitere Überlegungen bei der Verwendung von benutzerdefinierten Schriften:
Achten Sie auf die Dateigröße
Schriftarten können überraschend umfangreich sein, daher sollten Sie sich für Optionen entscheiden, die leichtere Versionen anbieten. Beispielsweise sollte eine Schriftart, die 50 KB wiegt, bevorzugt werden im Vergleich zu einer Schriftart, die 400 KB wiegt.
Begrenzen Sie den Zeichensatz, wenn möglich
Benötigen Sie wirklich die fetten und schwarzen Varianten einer Schriftart? Es ist eine gute Idee, Ihre Schriftsätze so einzuschränken, dass nur das geladen wird, was tatsächlich verwendet wird. Hier finden Sie einige gute Tipps dazu.
Verwenden Sie systemeigene Schriftarten für kleine Bildschirme
Viele Geräte haben schlechte Verbindungen. Ein Trick könnte sein, größere Bildschirme anzuvisieren, wenn die benutzerdefinierte Schriftart geladen wird, indem Sie @media verwenden.
In diesem Beispiel erhält der Bildschirm kleiner als 1000px eine Systemschriftart und Bildschirme mit einer solchen oder größeren Breite erhalten die benutzerdefinierte Schriftart.
@media (min-width: 1000px) {
body {
font-family: 'FontName', Fallback, sans-serif;
}
}Schriftarten-Dienste
Es gibt eine Reihe von Diensten, die Schriften hosten und Zugriff auf kommerziell lizenzierte Schriften bieten. Die Vorteile der Verwendung eines Dienstes liegen oft darin, dass eine große Auswahl an legalen Schriften effizient geliefert wird (z.B. indem sie auf einem schnellen CDN bereitgestellt werden).
Hier sind einige gehostete Schriftservices:
- Cloud Typography
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typotheque
- Fonts.com
- Google Fonts
- Font Squirrel
Was ist mit Icon-Schriften?
Es stimmt, dass @font-face eine Schriftdatei laden kann, die mit Symbolen gefüllt ist und für ein Symbolsystem verwendet werden kann. Ich denke jedoch, dass Sie mit SVG als Symbolsystem viel besser dran sind. Hier ist ein Vergleich der beiden Methoden.
Nächste Schritte mit @font-face
Weitere Informationen zur @font-face-Leistung
Verwandte CSS-Eigenschaften
Weitere Ressourcen zu @font-face
- CSS Fonts Module Level 4 (W3C)
- Wie man die URL-Sache in der @font-face-Regel verwendet (DigitalOcean)
