@font-face: Ship Custom Fonts with Your CSS
@font-face lets you use fonts not installed on a user's machine by telling the browser where to download them. It's how you get custom brand fonts on a website, but be wary of the performance hit from downloading large font files.
WHY IT EXISTS In the early web, designers were limited to a small set of "web-safe" fonts that were pre-installed on most computers, like Arial and Times New Roman. There was no reliable way to use a custom brand font. The @font-face rule was created to solve this by letting developers link to font files directly in their CSS, ensuring a consistent look across devices.
THE MENTAL MODEL Think of @font-face as a shipping label for fonts. You're telling the browser, "The font family 'MyBrandSans' isn't on this computer. Go fetch it from this URL, and here are its properties, like weight and style." Once defined, you can use font-family: 'MyBrandSans' anywhere in your CSS just like any system font.
HOW IT WORKS You declare an @font-face block in your CSS. Inside, you give the font a name using font-family and provide the path to the font file(s) using src: url(...). You should also specify font-weight and font-style so the browser knows which file corresponds to bold, italic, etc. Modern practice is to provide multiple formats, like WOFF2 and WOFF, for better compression and browser support.
WHEN TO USE IT Use it when your design requires a specific font for branding, readability, or aesthetics that isn't a standard system font. It's also the standard mechanism for implementing icon fonts, such as Font Awesome, which replaces characters with vector icons.
WHEN NOT TO USE IT Avoid it if a system font is good enough. Every custom font adds to the page weight and increases load time, which is especially critical on mobile connections. Loading many weights or styles you don't actually use is a common performance mistake. Also, always check the font license; not all fonts can be legally used on the web via @font-face.
ONE CANONICAL EXAMPLE To use the "Open Sans" font, you'd first define it: @font-face { font-family: 'Open Sans'; src: url('/fonts/opensans.woff2') format('woff2'); font-weight: 400; }. Then, you can apply it to your paragraphs: p { font-family: 'Open Sans', sans-serif; }. The sans-serif fallback is crucial in case the custom font fails to load for any reason.
Read the original → en.wikipedia.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.