How should you reference a font defined with @font-face in your CSS?

How should you reference a font defined with @font-face in your CSS?

• A. Use the font-family as declared in @font-face.
• B. Use the URL directly in font-family.
• C. Use the src attribute in font-family.
• D. Use the font-weight.

Answer: (A)

When you define a font with @font-face, you assign a name for that font using font-family inside that rule. That name is what you reference later in font-family for elements you want to use the font with. So you apply the font by its declared family name, not by the URL or the src there. For example, after creating @font-face { font-family: "CustomSans"; src: url("custom-sans.woff2"); }, you would write something like p { font-family: "CustomSans", Arial, sans-serif; }. The browser loads the font from the specified source and uses the named family you assigned. Using the URL directly in font-family or attempting to place src in font-family isn’t how font-family works, and font-weight is about choosing between different faces with the same family rather than selecting the font by itself. The essential idea is to reference the exact font-family name you defined in @font-face.

When you define a font with @font-face, you assign a name for that font using font-family inside that rule. That name is what you reference later in font-family for elements you want to use the font with. So you apply the font by its declared family name, not by the URL or the src there. For example, after creating @font-face { font-family: "CustomSans"; src: url("custom-sans.woff2"); }, you would write something like p { font-family: "CustomSans", Arial, sans-serif; }. The browser loads the font from the specified source and uses the named family you assigned. Using the URL directly in font-family or attempting to place src in font-family isn’t how font-family works, and font-weight is about choosing between different faces with the same family rather than selecting the font by itself. The essential idea is to reference the exact font-family name you defined in @font-face.