Getting a typeface confused with a font is something a lot of people, even designers, routinely do. Part of the issue lies in the fact that we have gotten used to interchangeably using these two separate words.
Here's how to identify the difference between a typeface and a script right off the bat without just going into the specifics: one is what you see, while the other is what you use. If that still doesn't help you to understand what a font is, then know that desktop publishing is ultimately responsible for escalating this misinterpretation over the decades.
The distinction between a font and a typeface comes from the old-school practice of using analogue printers to construct a page layout. The distinction between typeface and font has become blurrier as things have become more digital over the last few decades.
The Very Beginning
It is necessary to understand the origin of printing itself in order to comprehend the difference between a font and a typeface. Printers would cast whole sets of metal characters to comprise a font back in the days before digital printing. The etymology of the word "font" is, in fact, from the French word, "fonte." It means being cast in metal.
Now, fonts that exhibit identical features or styles are grouped together as a typeface. A separate collection or case for capital letters and small letters will be required for each font. These cases still exist as upper and lower cases in our vocabulary today.
Printers will have to physically bring together bits of text letter by letter in order to even build anything as simple as a page layout. This was then rolled out with ink, then pressed onto paper to create a print.
As you might have guessed, in order to build page templates, old-school printers would need a plethora of metal casts of letters, and the process was very labour-intensive, to say the least. Then these metal letters were laid out in relief (raised), so that they were seen more clearly, making them the typeface. This is related to how we discussed that a font can be differentiated from a font: it is simply what you see as opposed to what you use.
So how does a font fit into all this, and in relation to it, what is a typeface?
These metal frames or blocks that were part of this larger and wider community of typefaces are referred to by a font. In fact, each font had a specific weight and scale, enabling printers to get more details about the characters they were using.
In other words, a font that was 14 points in size was a different font than a font that was 18 points in size. When you add weight to the equation, from a typographical point of view, things can become much more precise. For example, a 22 point bold font will be a completely different font than a 26 point italicized font.
Let's look at an instance using a particular typeface.
The typeface of the Bulmer is a serif designed in the late 18th century. This font family is considered transitional since, as opposed to quaint Old Style features, it is traditionally regarded as epitomizing the Enlightenment's logical, more symmetrical aesthetic. At 9 points, a lowercase, italicized Bulmer is a font totally different from an uppercase, at 59 points, bolded Bulmer. While these two fonts are part of the same font family (Bulmer) and therefore the same font, due to their major weight and size variations, they are distinct.
To sum up, a typeface is basically a subset of a font or font family that includes different fonts of various sizes, types, and weights. It is necessary to point out that, however, not every typeface will have multiple fonts. All really depends on the typeface in question.
How Computers Caused Confusion
In the last few decades, the digital transition has been great. With a fast search on the internet, information is now accessible at a moment's notice, while remote work is opening up job opportunities and new modes of cooperation that were unforeseen just a few years ago. In real-time, contact with everyone around the world is possible, as is shopping at the click of a button.
Unfortunately, much of this development has also contributed to confusion between typefaces and fonts.
Computers have given rise to digital typesetting, where complete font collections are readily available for use on your new Mac or Windows desktop or tablet. Specifically, you can thank both desktop publishing and word processing applications for introducing this misunderstanding between typefaces and fonts.
Look at Microsoft Word, the font, not the typeface, can be easily found in the drop-down menu of the main navigation, as well as in the secondary and tertiary navigation tabs. Look at Apple's Pages as well - font types are often generally referred to as fonts in pages, furthering the confusion. In these word processors, when you open these font menus, you really get a big selection of typefaces in the corresponding drop-down menus. You should go ahead and set the basic features of your typeface only after selecting the "font," which is just the typeface (size, style, weight, etc.).
Unless you’re a typesetter or a typographer (or someone who just enjoys correcting people), these distinctions don’t matter too much in practical terms. After all, in spite of the confusion, most people understand what you mean when you tell them that you like this font or that typeface. The irony is that people are more familiar now than ever before with the wide range of font families at their disposal, thanks to their digital devices.