Arial Narrow in CSS: font-family Stack & @font-face Code
Last reviewed by the ArialNarrow.com editorial team
Short answer
Write font-family: 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;. Visitors with Office see the real font, Linux users get a same-width clone, and everyone else gets Arial. To show Arial Narrow to every visitor, buy a Monotype web license and self-host it with @font-face.
1. Basic CSS Font-Family Usage (No Licensing Needed)
This approach costs nothing and needs no license. You only name the font, and each visitor's browser uses their own installed copy if they have one:
.text-arial-narrow {
font-family: 'Arial Narrow', Arial, sans-serif;
}
.text-arial-narrow-bold {
font-family: 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
}Note the fallback order: browsers on macOS/Linux that lack Arial Narrow will skip straight to standard Arial (or its metric-compatible substitute) rather than a totally unrelated typeface.
2. @font-face Implementation (Licensed Web Font)
Want every visitor to see the same thing? Buy a Monotype web license, convert the files to WOFF2, host them yourself and declare them like this:
@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 keeps text visible while the file downloads. The FAQ below explains why.
3. Cross-Browser Fallback Stack
This stack orders fonts from closest match to most generic, so each operating system lands on the best font it has:
font-family: 'Arial Narrow', 'Liberation Sans Narrow',
'Helvetica Neue Condensed', Arial, sans-serif;Liberation Sans Narrow catches Linux, Helvetica Neue Condensed catches Macs (for bold text only, since macOS ships just the Condensed Bold and Black weights), and Arial, sans-serif covers the rest.
4. Browser Support
@font-face and font-display are supported in all current versions of Chrome, Firefox, Safari, and Edge. The only practical compatibility concern is font format: serve .woff2 as your primary format (smallest file size, universal modern support) with a .woff fallback only if you still need to support browsers from before roughly 2016.
Important Licensing Note
Never upload the TTF from your Windows Fonts folder to a web server. The Office license does not cover web embedding, and font foundries do send infringement notices to sites that self-host without one.Arial Narrow web licensing rules → Prefer to skip the licensing step entirely? Free Google Fonts that look similar →
Frequently Asked Questions
Why does font-family: "Arial Narrow" render as a different font on Mac or Linux?
The browser can only use fonts the visitor has. Arial Narrow comes with Microsoft Office, so Macs without Office and most Linux machines lack it. The browser moves down your font stack without any warning and lands on the next font it finds, often Liberation Sans Narrow on Linux or plain Arial on a Mac.
What does font-display: swap actually do?
It tells the browser to show text right away in a fallback font and switch to the web font once it arrives. Without it, some browsers hide the text for up to three seconds while the file downloads. You trade a small layout shift for text people can read immediately, which is almost always worth it.
Can I subset the font file to load faster?
Yes, as long as your license allows modification. Strip out the scripts you never use, such as Greek and Cyrillic, with fonttools' pyftsubset or glyphhanger, and the WOFF2 file often shrinks by more than half. Then add a unicode-range line to your @font-face rule so browsers only fetch it when needed.
Can I load Arial Narrow from Google Fonts?
No. Google Fonts only hosts open-source fonts, and Arial Narrow is proprietary. The closest fonts Google does host are Roboto Condensed, Archivo Narrow and Barlow Condensed.