CSS @font-face

@font-face ist die CSS-At-Regel, die dem Browser mitteilt, wo er eine Schriftdatei findet und wie er sie nennen soll. Sie wurde erstmals 1997 in IE 4 unterstützt, wurde aber erst um 2010 browserübergreifend praktikabel, als WOFF erschien und andere Browser die Regel konsistent implementierten.

Für Icon-Fonts ist @font-face das Bindeglied zwischen Ihren Schriftdateien und den CSS-Klassen, die Icons anzeigen. Ohne sie hat der Browser keine Möglichkeit zu wissen, dass font-family: 'MyIcons' eine bestimmte Datei von Ihrem Server laden soll.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Der font-family-Deskriptor gibt der Schrift einen Namen, auf den Sie später verweisen. Der src-Deskriptor teilt dem Browser mit, wo die Datei heruntergeladen werden kann und in welchem Format sie vorliegt. Die Deskriptoren font-weight und font-style stellen sicher, dass der Browser nicht versucht, fette oder kursive Varianten zu synthetisieren. Und font-display steuert, was passiert, während die Schrift lädt.

Der format()-Hinweis nach jeder URL teilt dem Browser mit, in welchem Format die Datei vorliegt, sodass er nicht unterstützte Formate überspringen kann, ohne sie zuerst herunterzuladen. Im Laufe der Jahre hat sich die empfohlene Formatmenge deutlich verkleinert, da die Browser-Unterstützung verbessert wurde.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

Mit einer Browser-Abdeckung von 97 %+ ist WOFF2 allein für die überwiegende Mehrheit moderner Projekte ausreichend. Dies ist der einfachste und leistungsfähigste Ansatz.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

Das Hinzufügen von WOFF als Fallback deckt IE 11 ab, der WOFF2 nicht unterstützt. Moderne Browser nehmen die WOFF2-Datei; IE 11 greift auf WOFF zurück.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

Der vollständige „kugelsichere" Stack enthält EOT für IE 6-8, WOFF2 für moderne Browser, WOFF für IE 9-11 und TTF als letzten Fallback. Der Browser versucht jeden src-Eintrag der Reihe nach und verwendet das erste Format, das er versteht. Dieser Ansatz ist nur für Projekte mit extremen Legacy-Anforderungen notwendig.

Das Standardmuster für Icon-Fonts verwendet eine Basisklasse, die die Schriftfamilie und gemeinsame Rendering-Stile setzt, dann individuelle Icon-Klassen, die ::before-Pseudo-Elemente mit content verwenden, das auf den Unicode-Codepunkt jedes Icons gesetzt ist.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

Die Basisklasse setzt den Schriftstil zurück, damit der Browser keine fetten, kursiven oder anderen Transformationen anwendet, die die Icons verzerren würden. Die Eigenschaften -webkit-font-smoothing und -moz-osx-font-smoothing aktivieren Antialiasing für ein schärferes Rendering auf macOS und iOS.

Jede Icon-Klasse setzt ein ::before-Pseudo-Element mit dem Unicode-Codepunkt, der dieser Glyphe zugewiesen ist. Die Backslash-E-Notation (\E001) ist CSS's Weg, ein Unicode-Zeichen über seinen hexadezimalen Codepunkt zu referenzieren.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Sowohl <i> als auch <span> funktionieren gleich gut. Das Element selbst ist leer — das Icon wird vollständig durch das ::before-Pseudo-Element gerendert.

Der font-display-Deskriptor steuert, was der Browser anzeigt, während die Schriftdatei noch heruntergeladen wird. Dies ist für Icon-Fonts entscheidend, da eine falsche Einstellung Icons während des Seitenladens unsichtbar machen kann.

Für Icon-Fonts ist swap die empfohlene Wahl. Ein kurzes Flash von ungestyltem Inhalt (wo Icon-Codepunkte als Quadrate oder leere Bereiche erscheinen könnten) ist weitaus besser als unsichtbare Icons. Mit block könnten Nutzer bei langsamen Verbindungen bis zu 3 Sekunden leere Bereiche sehen, wo Icons sein sollten — was wie eine kaputte Seite aussieht. Mit swap erscheinen die Icons, sobald die Schrift lädt, und der Übergang ist auf modernen Verbindungen in der Regel nicht wahrnehmbar.

Schriftdateien blockieren standardmäßig das Rendering — der Browser wird Text mit einer benutzerdefinierten Schrift nicht rendern, bis die Datei heruntergeladen wurde. Hier sind Techniken zur Minimierung der Auswirkungen:

• Schriftdatei vorausladen — verwenden Sie <link rel="preload">, um den Schriftdownload so früh wie möglich zu starten, bevor der Browser überhaupt das CSS analysiert, das sie referenziert.
• Schriften selbst hosten — die Auslieferung von Schriftdateien von derselben Quelle wie Ihr HTML vermeidet zusätzliche DNS-Lookups und Verbindungsaufbau und beseitigt CORS-Probleme.
• Schrift subsetten — entfernen Sie nicht verwendete Icons, um die Dateigröße zu reduzieren. Eine 500-Icon-Schrift, bei der Sie nur 50 Icons verwenden, verschwendet 90 % des Downloads.
• unicode-range verwenden — wenn Sie mehrere Icon-Sets haben, teilt dieser Deskriptor dem Browser mit, die Schriftdatei nur herunterzuladen, wenn Zeichen im angegebenen Bereich tatsächlich auf der Seite verwendet werden.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

Das crossorigin-Attribut ist auch für Same-Origin-Schriften erforderlich — das ist eine Eigenheit der Schriftlade-Spezifikation. Ohne es lädt der Browser die Schrift zweimal herunter: einmal vom Preload-Hinweis (ohne CORS) und einmal von der @font-face-Regel (mit CORS).

• CORS-Fehler — von einem anderen Ursprung ausgelieferte Schriftdateien (z. B. eine CDN-Subdomain) benötigen Access-Control-Allow-Origin-Header auf dem Server. Alternativ verwenden Sie das crossorigin-Attribut am <link>-Tag. Ohne ordnungsgemäße CORS-Konfiguration blockiert der Browser die Schrift stillschweigend.
• Icons werden als Quadrate oder Rechtecke angezeigt — das bedeutet in der Regel, dass der Pfad zur Schriftdatei falsch ist, die Schrift noch nicht geladen wurde oder der font-family-Name in der Icon-Klasse nicht mit dem Namen in der @font-face-Deklaration übereinstimmt. Prüfen Sie den Netzwerk-Tab Ihres Browsers, um zu bestätigen, dass die Schriftdatei mit Status 200 geladen wurde.
• Icons zeigen falsche Glyphen — Unicode-Codepunkt-Konflikte mit Systemschriften. Wenn Ihre Icon-Font Codepunkte in Bereichen verwendet, die sich mit gängigen Systemschriften überschneiden, könnte der Browser stattdessen ein Systemzeichen rendern. Icon-Fonts verwenden typischerweise den Private Use Area (U+E000 bis U+F8FF), um dies zu vermeiden.