Dieser Artikel ist für jeden geeignet, von Anfängern bis hin zu den erfahrensten Webentwicklern. Ich habe gesehen, wie jahrzehntelang erfahrene Senior Web Developer Schriftarten ignoriert und nicht richtig damit umgegangen sind, also lesen Sie bitte mit.

Nach dem Lesen einiger Zeilen werden Sie die korrekte @font-face und CSS verwenden, die browserübergreifend richtig funktionieren.

Ihre Website wird auf allen Geräten so aussehen und funktionieren, wie sie soll.

Was sind Font Faces?

Ich gehe davon aus, dass Sie das bereits wissen, sonst würden Sie diesen Artikel nicht lesen.

Allerdings sei der Vollständigkeit halber erwähnt, dass ein @font-face es ermöglicht, bestimmte Schriftarten in eine Website einzubetten, ohne dass der Benutzer sie auf seinem System installiert haben muss.

Die verfügbaren Schrifttypen sind: “.woff”, “.woff2”, “.ttf”, “.otf”, “.eot” und “.svg”.

  • .woff steht für Web Open Font Format
  • .woff2 steht für WOFF 2.0 - Web Open Font Format
  • .ttf, .otf steht für TTF/OTF - TrueType und OpenType
  • .eot steht für EOT - Embedded OpenType
  • .svg steht für SVG-Schriftarten

Jeder Browser hat seine “eigene” Unterstützung für diese Typen (leider), also müssen Sie das berücksichtigen.

Wenn Ihre Seiten auf allen Geräten und Browsern gleich aussehen sollen, benötigen Sie alle oben genannten Formate.

Wie verwendet man Font Face korrekt?

Hier wird es knifflig, denn wenn Sie danach googlen, werden selbst die Top-Websites die harte Realität nicht zeigen.

Wie oben erwähnt, hat jeder Browser seine eigene Unterstützung für Schriftarten, und wenn Sie möchten, dass Ihre Schriftart auf jedem Browser funktioniert, müssen Sie die notwendigen Schrifttypen laden und Ihr CSS entsprechend anpassen.

Wenn wir zum Beispiel Mozilla überprüfen, werden Sie Folgendes bemerken:

1@font-face {
2font-family: "Open Sans";
3src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

Reicht das aus? Nein, es wird nicht in allen Browsern funktionieren. Das wird zum Beispiel im Internet Explorer überhaupt nicht funktionieren.

Sie können https://caniuse.com/?search=woff2 überprüfen und sich selbst überzeugen.

Ein weiteres Beispiel: Wenn wir W3 Schools überprüfen:

1@font-face {
2font-family: myFirstFont;
3src: url(myFirstFont.woff);
4}

Ist das korrekt? Immer noch nein, es unterstützt nicht alle Browser.

Um alle Browser zu unterstützen, sollten Ihre geladenen Schrifttypen und CSS so aussehen:

 1@font-face {
 2font-family: 'FONT';
 3src: url('FONT.eot'); /_ IE9 Compat Modes _/
 4src: local(''),
 5url('FONT.eot?#iefix') format('embedded-opentype'), /_ IE6-IE8 _/
 6url('FONT.woff2') format('woff2'), /_ Super Modern Browsers _/
 7url('FONT.woff') format('woff'), /_ Modern Browsers _/
 8url('FONT.ttf') format('truetype'), /_ Safari, Android, iOS _/
 9url('FONT.svg#FONT') format('svg'); /_ Legacy iOS _/
10}

Beachten Sie die Kommentare bei jedem Schrifttyp, sie sind selbsterklärend. Dies unterstützt alle Browser und Ihre Schriftart wird korrekt angezeigt.

Wie konvertiert und generiert man Font Face Typen?

Wenn Sie eine Website für einen Kunden entwickeln, wird dieser Ihnen normalerweise einen Schrifttyp geben. Das ist entweder nur .otf oder .ttf Format, was nicht ausreicht.

Sie benötigen alle erforderlichen Formate für alle Browser, also müssen Sie diese in die entsprechenden @font-face Typen konvertieren.

Glücklicherweise haben wir Online-Tools, die dies automatisch erledigen und sogar das korrekte CSS dafür generieren (haben wir uns weiterentwickelt oder nicht).

Bezahlte/benutzerdefinierte Schriften konvertieren

Ich empfehle Ihnen Transfonter , aber Sie können natürlich jedes beliebige Tool verwenden.

Dieses kostenlose Online-Tool konvertiert Ihre Schriftart und stellt Ihnen einsatzbereite Schrifttypen und CSS zur Verfügung:

 1@font-face {
 2font-family: 'Sample';
 3src: url('Sample.eot');
 4src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5url('Sample.woff2') format('woff2'),
 6url('Sample.woff') format('woff'),
 7url('Sample.ttf') format('truetype'),
 8url('Sample.svg#Sample') format('svg');
 9font-weight: normal;
10font-style: normal;
11}

Kostenlose/Open-Source Schriften konvertieren

In einem anderen Szenario, in dem Ihr Kunde Ihnen keine bezahlte Schrift, sondern eine kostenlose Google Font gibt, gibt es auch dafür ein Tool: https://google-webfonts-helper.herokuapp.com/fonts .

Dieses Tool generiert ebenfalls die Typen und CSS, die notwendig sind, um Ihre Schriftarten in allen Browsern korrekt anzuzeigen.

Ich empfehle Ihnen dringend, die resultierenden Schriftarten in verschiedenen Browsern zu überprüfen.

Wie verwendet man Font Families korrekt?

Ich kann sicher wetten, dass Sie die Font-Family-Spezifikation nie optimal verwendet haben. Das Laden der korrekten Font Face reicht nicht aus, Sie müssen auch Fallback-Schriftarten angeben.

Fallback-Schriftarten werden verwendet, wenn die aktuelle Schriftart nicht verfügbar ist. Dies kann aus verschiedenen Gründen passieren, von einem CDN-Problem bis zu einem Netzwerk-Timeout.

Sie werden bemerken, dass die meisten CMS Fallback-Schriftarten wie folgt definiert haben:

1html {
2font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

Reicht das aus? Nein. Leider sind System-Schriftarten nicht auf jedem Gerät gleich. Windows hat seine eigenen, Android hat seine eigenen, iOS ebenso und so weiter.

Was also tun? Deklarieren Sie sie richtig, schauen Sie sich an, wie Bootstrap es macht:

 1// Safari for OS X and iOS (San Francisco)
 2-apple-system,
 3// Chrome < 56 for OS X (San Francisco)
 4BlinkMacSystemFont,
 5// Windows
 6"Segoe UI",
 7// Android
 8"Roboto",
 9// Basic web fallback
10"Helvetica Neue", Arial, sans-serif,
11// Emoji fonts
12"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Mit benutzerdefinierten Schriftarten sieht das Ergebnis wie folgt aus:

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Das ist eine saubere Art, mit Fallback-Schriftarten umzugehen und sicherzustellen, dass Ihre Website auf allen Geräten gut aussieht, während Schriftarten geladen werden (oder gar nicht geladen werden).

Font Face und Font Family testen

Lassen Sie sich vom Wort Testen nicht abschrecken, das ist ein sehr einfacher Prozess, wenn Sie clever arbeiten. Sie müssen die Seite nicht einmal manuell inspizieren, um zu sehen, welche Schriftart geladen wurde (wenn Sie faul sind).

Mit der Weiterentwicklung der Technologie entwickeln sich auch die für Entwickler verfügbaren Tools; das Erstellen von Dingen wird immer einfacher.

Zu überprüfen, ob Ihr @font-face und font-family korrekt laden, ist ein sehr einfacher Prozess, siehe unten.

Font Face und Font Family überprüfen

  1. Verwenden Sie eine Browser-Erweiterung, um einfach zu sehen, welche Schriftart Ihre Website verwendet:
  1. Bearbeiten Sie Ihre Seite und “brechen” Sie die @font-face, um einen Fall zu simulieren, in dem Ihre benutzerdefinierte Schriftart nicht geladen wird. Sie können das Laden “brechen”, indem Sie den Schriftnamen oder die URL auf eine nicht existierende Schrift ändern.
  2. Das Ergebnis sollte die erste Schriftart sein, die Ihrem Gerät als Fallback entspricht. Zum Beispiel sollte auf einem Apple-Gerät “-apple-system” verwendet werden.

Tipps und Tricks

  • Verwenden Sie das “preconnect” HTML-Link-Header-Tag, wenn Sie Schriftarten von einem CDN laden.
  • Fügen Sie bei jeder Schriftdeklaration font-display: swap; hinzu, um das Laden zu beschleunigen. Dies weist den Browser an, die Fallback-Schriftart zu verwenden, bis die benutzerdefinierte Schriftart vollständig heruntergeladen wurde.
  • Laden Sie nur die Schriftarten, die tatsächlich notwendig sind. Ich habe gesehen, wie Leute 7 Schrifttypen derselben Schriftart geladen haben, aber nur einen davon verwenden.
  • Um die Seitengeschwindigkeit zu verbessern, laden Sie die (erste oder notwendige) Schriftart per HTTP/2 vor. Dies beschleunigt Ihre Seite erheblich und behebt das Google PageSpeed-Problem “Ensure text remains visible during webfont load”.

Das war’s, ich hoffe dieser Artikel hat Ihnen geholfen.