A typeface is a design
A typeface is the design of a set of letters: the shapes of the characters, their proportions, the look as a whole. Garamond, Helvetica and Baskerville are typefaces. You can recognise one on a page whatever size it is printed at.
A font is a version of it
In traditional printing, a font was a complete set of metal pieces in one size and style, so Garamond Bold at 12 points was one font and Garamond Italic at 12 points was another. On a computer, a font usually means the file you install, such as Garamond Bold.
Family, weight and style
- A typeface family is the whole collection: regular, bold, italic and so on.
- Weight is how heavy the strokes are: light, regular, bold, black.
- Style is the slant or posture, such as upright or italic.
An example
Arial is a typeface. Arial Bold is one of its fonts. If someone says "change the font to Arial", they mean the typeface, and everyone understands, which is why the difference rarely matters in conversation.
Where it shows up
On the web, the CSS property is font-family, even though it is really picking a typeface. In design tools you choose a font and a style. In a print shop, people may use the two words more strictly.
What a text generator makes
Neither. A "typeface generator" or "font generator" like this one swaps your ordinary letters for special Unicode characters that look like another design. The result is styled text, not a typeface or a font file. Here is how that works.