CSS · At-rules, values and responsive design

@font-face

Declares a custom font and its source files, weight range and display behaviour.

cssRunnable example css course

Syntax

@font-face { … }

Example

Try it

@font-face {
  font-family: "Demo";
  src: local("Georgia");
}
.demo { font-family: "Demo", serif; }

Always include a local or system fallback so text renders while the font loads.

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.