@font-face ist die At-Regel, mit der eine eigene Schriftdatei eingebunden wird. Wie sie geladen wird, entscheidet mit über die wahrgenommene Geschwindigkeit.
- @font-face (Webfont-Einbindung)
At-Regel, die eine Schriftdatei unter einem Namen verfügbar macht.
Beispiel: „Ein @font-face verbindet einen Namen mit einer Datei und einem Schnitt.“Auch: Webfont.
Die Einbindung
@font-face {
font-family: 'Inter Tight';
src: url('/fonts/inter-tight-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Je Schnitt eine Regel: Normal, Fett, Kursiv. Das Format WOFF2 genügt heute, ältere Formate sind nicht mehr nötig. Eine variable Schrift deckt mehrere Gewichte in einer Datei ab.
font-display entscheidet
Mit swap zeigt der Browser sofort die Ersatzschrift und tauscht später. Der Text ist dann von Anfang an lesbar, springt aber einmal. Mit block bleibt er kurz unsichtbar. Für Fließtext ist swap die bessere Wahl; wie stark der Sprung auffällt, hängt davon ab, wie ähnlich die Ersatzschrift ist.
Schriften gehören auf den eigenen Server. Das Einbinden von einem fremden Dienst überträgt die IP-Adresse der Besucher dorthin und ist in Deutschland abgemahnt worden.