How to add some non-standard font to a website?

html

responsive-design

performance

tools

byAlex Kataev·Jan 21, 2025

The trick to adding a non-standard font effectively is using CSS @font-face. Here, the font family is defined and the path to your font file is provided. Take a look at this example using a mock font, MyCustomFont:

@font-face {
  font-family: 'MyCustomFont';
  src: url('font.woff2') format('woff2'), /* because cutting-edge tech is cool */
  url('font.woff') format('woff'); /* because it's good to have a fallback plan */
}

body {
  font-family: 'MyCustomFont', fallback-fonts; /* Use MyCustomFont, if not then browser decides */
}

Compatibility, one of technology's biggest pain points, is handled by .woff2 and .woff. Remember to replace 'font.woff2' with your font's pathway ('font-that-is-hopefully-not-comic-sans.woff2').

Preparation: Selecting and Optimizing Font Formats

Kick off the process with font selection. Your go-tos should be the WOFF (Web Open Font Format) for its sweet lean compression, and WOFF2 for its mix of lean and mean performance. If visiting the past is necessary, TTF or EOT will do for older browsers. As a ninja trick, utilize a tool like Font Squirrel's Webfont Generator for creating web-ready fonts of all necessary formats (plus save your sanity!).

Coding: Bulletproof `@font-face` Syntax

Presenting the cross-browser compatible version. Catch the joke in the comments!

@font-face {
  font-family: 'MyCustomFont'; 
  src: url('mycustomfont.eot'); /* IE9's secret sauce */
  src: url('mycustomfont.eot?#iefix') format('embedded-opentype'), /* 'Cause IE6-IE8 also want to play */
       url('mycustomfont.woff2') format('woff2'), /* WOFF2 for the James Bonds of browsers */
       url('mycustomfont.woff') format('woff'), /* WOFF, the Wingman */
       url('mycustomfont.ttf')  format('truetype'), /* TTF for the Safari explorers, Android aliens, iOS apple lovers */
       url('mycustomfont.svg#svgFontName') format('svg'); /* Legacy iOS sends its regards! */
}

Robustness: Handling Font Loading and Fallbacks

Ensuring Load Stability & Specifying Fallbacks

Neat fallback font families (sans-serif, serif) are your buddies for those worrisome instances your custom font decides to ditch loading.

Hosting and Correct File Serving

Place your font files in a steady location on your server and beam the correct URL paths to your CSS. CORS settings check! Slightly obsess over this to confirm fonts aren't marred by cross-origin policies.

Compatibility: Browser Play Test

Verifying Browser Support

Use a digital crystal ball - caniuse.com - to verify browser support for @font-face. The modern formats like WOFF2 are well-loved, but everyone needs a reliable fallback.

Test Across Dimensions

Your user base lives on different devices and browsers. How the fonts render on various operating systems and screen resolutions can vary greatly. Look to today's dev tools to simulate these different environments.

Next-level Techniques

Web Font Services

Axis of variety, Google Web Fonts is a treasure trove of good, free-to-use web fonts. Looking for exclusivity? Services like Typekit might be your cup of tea.

Advanced Font Control: Web Font Loaders

For the control freaks out there (no judgement), Javascript-based loaders like Webfontloader offer control for font loading events.

Accessibility & Performance: Keep 'em Happy

Accessibility Matters

Adhere to WebAIM guidelines to make your typography decisions with accessibility in mind. Things to watch out for: size, color contrast, and legibility.