Which property is used to change the font of an element?

Question

I took a CSS quiz at w3schools.com, and I got all of the answers correct except the one below. I tried to search on the subject, but as far as I can see the answer should be correct. Where am I wrong? Really confused with this.

15. Which property is used to change the font of an element?

You answered:

font-family

Wrong Answer!

Solution 1

The font property is the one that changes all aspects of a font, including family, style and weight. The font-family property only changes the font-family. The family is a group of related fonts (or typefaces).

So 'Comic Sans MS' is a font family, while 'Comic Sans MS Bold 10pt' is a font. In speech, people tend to mix up those terms.

Solution 2

font and font-family do different things:

Best illustrated with an example. Arial is a font family. Arial Bold 14 point is a type font. Helvetica is a font family. Helvetica Ultra Compressed 26 point is a type font.

Solution 3

The quiz says that the correct answer is that both font-family and font can be used to set the font. This can be characterized as correct, when the other options are font-family alone and font alone. This question, and the quiz in its entirety, is not as seriously wrong as much of w3schools content (see http://w3fools.com), just largely pointless and inaccurate.

The font-family property sets, as the name suggests, the font family alone. The font shorthand sets all normally settable font properties and also line height. The interpretation of the question revolves around the question “what is a font?” If you mean font family, then font-family sets that only, whereas font also sets font size, font weight, etc. If you mean a specific typeface in a specific size, specific weight etc., then only font does that.

Comments

[Zach Saucier]

What's wrong with this question?

[Patsy Issa]

The question expresses a legitimate concern and shows the will to learn, shouldn't we be encouraging such behaviour?

[TylerH]

This is a "do my homework" question at best that can be answered by simply looking at the two possible answers. "Font" or "font-family" are the only choices.

[Patsy Issa]

On a side-note w3schools isn't a reliable source to learn from, check out css tricks and mdn when in doubt/learning things.

[Zach Saucier]

@TylerH Asking a specific question about why his answer is wrong on a code quiz is not a "do my homework" question IMO. He's just wanting to learn which is the entire purpose of SO

[GolezTrol]

It would be nice if the quiz itself would provide the explanation, but that aside, I agree with Zach here. Nobody asked to 'do' anything, Attila is just asking for information/explanation.

[Attila Albert]

aaaa... got it now, so the font will set all the font properties in one declaration. thanks. all clear. never used that property like that.

[Zach Saucier]

You should link to the Yahoo Answer you quoted

[Attila Albert]

15. Which property is used to change the font of an element? You answered: font Wrong Answer! - So basically the correct answer is both (font and font-family)

[GolezTrol]

Good to know. I haven't done the quiz, so I didn't know the available options. But yes, if you look at it that way, then font-family also changes the overal appearance of a font. -edit- Done it. 100% Woohoo! :D

[Attila Albert]

Yes, sorry I did not mention first all the 3 possible answers, but after I did the quiz it did not show them. So I did it 3 times and finally the 3rd answer was correct. But anyway this is something I will never forget :) Tricky question, this is why I love tests, always learn something from them :D But your answer clarified me the whole thing!

[Inspector Squirrel]

As you can tell by the quotes that were in there originally, I didn't intend for it to be a plagiarism, just didn't deem it as being link-worthy. Thanks for the advice.