A font is a version of a typeface. Usually, a typeface has several font versions to provide different formatting options in terms of font weights and styles:
- roman (regular)
- boldfaced (bold)
- italicized (italic)
- small caps
Many typefaces/font families (same thing on the web) have several font weights, ranging from hair (thinnest) to black (thickets).
You can think of a typeface as the parent/root design, and all its font as its children. Together they are a font family.
The typeface below is called Alegreya and it has numerous font weights and styles:
In short: a font family is a collection of fonts that belong to the same typeface.