How do you declare a custom font and apply it to headings?

WHAT THIS TESTS: This question checks whether you understand the two-step process for using custom fonts on the web: first declaring a font resource with the @font-face at-rule, then referencing that declared name in a font-family property on the elements you want to style. It also reveals if you know the difference between a font file path and a font family identifier, and whether you consider fallbacks, formats, and basic loading behavior.

A GOOD ANSWER COVERS: First, the candidate should describe an @font-face block containing at minimum a font-family descriptor to define a custom name and a src descriptor pointing to the WOFF2 file. Second, they should mention that src can include a local fallback using local() and a format hint such as format('woff2') to help the browser decide whether to download the file. Third, they should explain applying the font by using a selector targeting headings, for example h1 through h6, and setting font-family to the custom name declared in @font-face. Fourth, a strong candidate might mention adding a generic fallback like sans-serif or serif to the font-family stack for resilience, and possibly setting a font-display strategy to control loading behavior.

COMMON WRONG ANSWERS: The biggest red flag is trying to put the raw filename directly into a font-family property without using @font-face at all. Another mistake is omitting the src descriptor inside @font-face, which makes the rule invalid. Some candidates forget that @font-face only declares the font; it does not apply it to any elements automatically. Confusing the font file URL with the font-family name is also a signal of weak CSS fundamentals. Finally, failing to provide a generic fallback family can indicate inexperience with resilient design.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle font loading performance, which opens discussion of the font-display descriptor such as swap, optional, or block. They might ask about supporting multiple font formats for older browsers, which involves listing multiple sources in src with appropriate format hints in order of preference. Another follow-up could be about subsetting the font with unicode-range to download only needed glyphs, or about variable fonts and how they change the @font-face declaration by allowing a range of weights or styles in a single file.

ONE CONCRETE EXAMPLE: Suppose you have a file named headings.woff2. You would write @font-face { font-family: 'CustomHeading'; src: url('headings.woff2') format('woff2'); font-display: swap; } and then apply it with h1, h2, h3, h4, h5, h6 { font-family: 'CustomHeading', serif; }. This separates the resource declaration from the typographic styling, provides a fallback while avoiding invisible text during load, and uses a format hint so the browser can skip the download if it does not support WOFF2.

Source: developer.mozilla.org