HTML Font Face and CSS font-family

CSS lets you provide a prioritized font stack. The browser uses the first available font and falls back through the list.

<p class="sample">Readable text</p>

.sample {
  font-family: Arial, Helvetica, sans-serif;
}

This paragraph uses an Arial/Helvetica/sans-serif stack.

Web fonts Top ↑

If you need a specific downloadable font, define it with CSS @font-face. Provide appropriate font files and fallbacks rather than assuming a visitor has a particular desktop font installed.

@font-face {
  font-family: 'MySiteFont';
  src: url('/fonts/site.woff2') format('woff2');
  font-display: swap;
}

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Is the HTML font face attribute still recommended?

No. Use the CSS font-family property for new pages.

What happens if a font is unavailable?

The browser moves to the next font in the font-family list.

Should I specify a generic family?

Yes. End a font stack with a suitable generic family such as sans-serif, serif or monospace.

What is @font-face for?

It defines downloadable web fonts in CSS.

Can CSS use multiple fallback fonts?

Yes. List them in preference order, separated by commas.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: