← Back to at-rules

CSS At-rule

@font-face

Typography

Defines a custom font to be loaded and used in the document.

Syntax

@font-face { font-family: 'Name'; src: url('font.woff2'); }

Example

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); }

Common use cases

  • Loading self-hosted fonts
  • Custom brand typography
  • Avoiding external font service dependencies

Practical developer insight

Always provide woff2 format first — it's the most compressed and widely supported. Self-hosting fonts avoids third-party privacy and performance issues.

Related

@importfont-sizefont-weight