字体

In strict typographic usage, a font is a specific instance of a typeface at a particular weight, size, and style. "Inter Bold" at 16px is a font. "Inter Regular" at 24px is a different font. "Inter Italic" at 16px is yet another font. The typeface is the design family; the font is the individual member.

This distinction originated in the era of metal type, where each size of each weight of a typeface was literally a separate physical object — a separate tray of metal sorts that a typesetter would reach for. A print shop might have "Garamond 12pt Roman", "Garamond 14pt Roman", and "Garamond 12pt Italic" as three distinct physical font collections.

/* In CSS, you construct a font by combining typeface + weight + style */
.font-regular {
  font-family: 'Inter', sans-serif;  /* Typeface */
  font-weight: 400;                   /* Weight */
  font-style: normal;                 /* Style */
  /* Together: "Inter Regular" */
}

.font-bold-italic {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: italic;
  /* Together: "Inter Bold Italic" */
}

/* Variable fonts blur this — one file, infinite fonts */
.variable-instance {
  font-family: 'Inter', sans-serif;
  font-variation-settings: 'wght' 550, 'slnt' -10;
  /* A specific point on the variation space — an "instance" */
}

In everyday usage — and in most CSS documentation — the terms font and typeface are used interchangeably, and this causes no real confusion in practice. The CSS font-family property is actually selecting a typeface; @font-face loads individual font files. Variable fonts blur the distinction further: a single .woff2 file may contain what were traditionally dozens of separate fonts, making the historical definition increasingly abstract.

For practical web development, the meaningful question is: which font files does the browser need to download? Each combination of weight and style may be a separate file. Loading Inter with weights 400 and 700 means two font files. That's two fonts from the Inter typeface, optimized for your use case.

The modern trend toward variable fonts is gradually erasing this distinction in practice. A single inter-variable.woff2 file contains all the fonts in the Inter family across its weight axis. You're still specifying a specific font when you declare font-weight: 600, but the physical file boundary no longer maps one-to-one with individual font instances. Understanding the underlying concept remains useful even as the implementation evolves.