Arial Narrow in CSS: font-family-Stack & @font-face-Code
Zuletzt geprüft: von der Redaktion von ArialNarrow.com
Kurz gesagt
Schreiben Sie font-family: 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;. Besucher mit Office sehen die echte Schrift, Linux-Nutzer einen Klon mit gleicher Breite und alle anderen Arial. Soll jeder Besucher Arial Narrow sehen, kaufen Sie eine Monotype-Webfont-Lizenz und hosten die Schrift per @font-face selbst.
1. Einfache font-family-Nutzung (keine Lizenz nötig)
Dieser Weg kostet nichts und braucht keine Lizenz. Sie nennen nur den Schriftnamen, und der Browser jedes Besuchers nutzt dessen eigene installierte Kopie, falls vorhanden:
.text-arial-narrow {
font-family: 'Arial Narrow', Arial, sans-serif;
}
.text-arial-narrow-bold {
font-family: 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
}Achten Sie auf die Fallback-Reihenfolge: Browser unter macOS oder Linux ohne Arial Narrow springen direkt zur normalen Arial (oder ihrem metrisch kompatiblen Ersatz) statt zu einer völlig fremden Schrift.
2. Einbindung per @font-face (lizenzierte Webfont)
Sollen alle Besucher dasselbe sehen? Kaufen Sie eine Monotype-Webfont-Lizenz, wandeln Sie die Dateien in WOFF2 um, hosten Sie sie selbst und deklarieren Sie sie so:
@font-face {
font-family: 'Arial Narrow';
src: url('/fonts/ArialNarrow.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Arial Narrow';
src: url('/fonts/ArialNarrow-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}font-display: swap hält den Text sichtbar, während die Datei lädt. Warum, erklären die FAQ unten.
3. Browserübergreifender Fallback-Stack
Dieser Stack ordnet die Schriften von der ähnlichsten bis zur allgemeinsten, sodass jedes Betriebssystem bei der besten verfügbaren Schrift landet:
font-family: 'Arial Narrow', 'Liberation Sans Narrow',
'Helvetica Neue Condensed', Arial, sans-serif;Liberation Sans Narrow fängt Linux ab, Helvetica Neue Condensed den Mac (nur für fetten Text, da macOS nur die Schnitte Condensed Bold und Black mitbringt), und Arial, sans-serif deckt den Rest ab.
4. Browser-Unterstützung
@font-face und font-display werden von allen aktuellen Versionen von Chrome, Firefox, Safari und Edge unterstützt. Praktisch relevant ist nur das Schriftformat: Liefern Sie .woff2 als Hauptformat aus (kleinste Dateigröße, überall unterstützt) und ein .woff-Fallback nur, wenn Sie noch Browser von vor etwa 2016 unterstützen müssen.
Wichtiger Hinweis zur Lizenz
Laden Sie niemals die TTF-Datei aus Ihrem Windows-Schriftordner auf einen Webserver. Die Office-Lizenz deckt die Web-Einbindung nicht ab, und Schriftenhersteller verschicken tatsächlich Abmahnungen an Websites, die ohne Lizenz selbst hosten. Web-Lizenzregeln für Arial Narrow → Lieber ganz ohne Lizenzfragen? Kostenlose Google Fonts, die ähnlich aussehen →
Häufige Fragen
Warum erscheint font-family: "Arial Narrow" auf Mac oder Linux in einer anderen Schrift?
Der Browser kann nur Schriften nutzen, die der Besucher hat. Arial Narrow kommt mit Microsoft Office, Macs ohne Office und die meisten Linux-Rechner haben sie also nicht. Der Browser geht ohne jede Warnung Ihren Font-Stack hinunter und landet bei der nächsten Schrift, die er findet – unter Linux oft Liberation Sans Narrow, auf dem Mac schlicht Arial.
Was bewirkt font-display: swap eigentlich?
Es weist den Browser an, Text sofort in einer Ersatzschrift anzuzeigen und zur Webfont zu wechseln, sobald sie da ist. Ohne diese Angabe blenden manche Browser den Text bis zu drei Sekunden aus, während die Datei lädt. Sie tauschen eine kleine Layoutverschiebung gegen sofort lesbaren Text – das lohnt sich fast immer.
Kann ich die Schriftdatei verkleinern, damit sie schneller lädt?
Ja, sofern Ihre Lizenz Änderungen erlaubt. Entfernen Sie mit pyftsubset aus fonttools oder mit glyphhanger die Schriftsysteme, die Sie nie brauchen, etwa Griechisch und Kyrillisch – die WOFF2-Datei schrumpft dann oft um mehr als die Hälfte. Ergänzen Sie anschließend in der @font-face-Regel eine unicode-range-Zeile, damit Browser die Datei nur bei Bedarf laden.
Kann ich Arial Narrow über Google Fonts laden?
Nein. Google Fonts hostet nur Open-Source-Schriften, und Arial Narrow ist proprietär. Die ähnlichsten Schriften bei Google sind Roboto Condensed, Archivo Narrow und Barlow Condensed.