Which approach enables embedding custom fonts so they can be used on a webpage?

Which approach enables embedding custom fonts so they can be used on a webpage?

• A. Link tag with rel stylesheet to a font file
• B. @font-face with a font-family and src URLs
• C. Using @font-face without font-family
• D. Using font-face rule inside a script tag

Answer: (B)

Loading custom fonts for a webpage is done with the CSS @font-face rule. You give the font a name with font-family and point to the actual font file(s) using src. Once defined, you can apply that font-family just like any other font throughout your CSS. This is the standard, reliable way to bring your own fonts into a site. Example: @font-face { font-family: 'CustomFont'; src: url('/fonts/CustomFont.woff2') format('woff2'), url('/fonts/CustomFont.woff') format('woff'); font-display: swap; } body { font-family: 'CustomFont', system-ui, -apple-system, sans-serif; } The other approaches don’t fit because they don’t establish a reusable named font in CSS. Linking a stylesheet to a font file doesn’t define a font to use; it merely links to CSS content. Using @font-face without a font-family leaves you with a rule that can’t be applied to any element. Placing an @font-face rule inside a script tag isn’t a standard way to load fonts, since fonts are CSS resources and should be defined in CSS (or injected into a style sheet, not inline in a script).

Loading custom fonts for a webpage is done with the CSS @font-face rule. You give the font a name with font-family and point to the actual font file(s) using src. Once defined, you can apply that font-family just like any other font throughout your CSS. This is the standard, reliable way to bring your own fonts into a site.

Example:

@font-face {

font-family: 'CustomFont';

src: url('/fonts/CustomFont.woff2') format('woff2'),

url('/fonts/CustomFont.woff') format('woff');

font-display: swap;

}

body { font-family: 'CustomFont', system-ui, -apple-system, sans-serif; }

The other approaches don’t fit because they don’t establish a reusable named font in CSS. Linking a stylesheet to a font file doesn’t define a font to use; it merely links to CSS content. Using @font-face without a font-family leaves you with a rule that can’t be applied to any element. Placing an @font-face rule inside a script tag isn’t a standard way to load fonts, since fonts are CSS resources and should be defined in CSS (or injected into a style sheet, not inline in a script).