Skip to main content

What does the @font-face rule do?

@font-face lets you load a custom font (a local file) and use it through font-family. Example:

css
@font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff2") format("woff2"); } p { font-family: "MyFont", sans-serif; }

With @font-face, the browser will load the specified file and apply it like a regular font.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

What does the @font-face rule do?: CSS Interview Question