Typeface vs. font
The typeface is the design (Helvetica); the font is the resource that delivers it, whether that is one static style or a variable file spanning many.
See it
What it is
A typeface is the design: the drawn alphabet somebody spent years on, like Helvetica, Garamond, or Inter. A font is a particular implementation of that design, the resource you actually load. A static font usually delivers one style (Inter SemiBold Italic, the .woff2 file sitting in your assets folder), while a variable font can deliver an entire range of weights, widths, and styles from one file. The split comes from metal type, where the typeface was the design and a font was one drawer of sorts at one size and one style. Buy the design, receive the files.
Reach for the distinction when money or precision is involved: you license a typeface, but the invoice counts fonts (styles, weights, seat tiers). Brand guidelines and foundry conversations use it properly. CSS does not: font-family wants the family name, and every property starts with 'font' regardless of what you meant.
Two traps. First, correcting a colleague mid-meeting is a worse look than using the loose word; in daily speech 'font' has won and that is fine. Second, variable fonts blur the line anyway, since a single file carries an entire weight and width range, so the tidy one-file-per-style model no longer holds.
Ask AI for it
Write the typography section of a brand guideline using the terms precisely. Name the typeface (the design) once, then list the specific fonts we license as separate files or variable instances: family, weight, style, and format (.woff2 for web, .otf for print). For each one give the CSS font-family stack, the font-weight value, and where it is used (display, body, UI labels). Add a licensing line stating the typeface licensed, the number of styles covered, and the seat or pageview tier. Keep 'typeface' for the design and 'font' for the delivered file throughout.