0
votes

As you can see the in image below, the font-family property of my element is Helvetica, sans-serif, however, the rendered font is Arial. Why is this happening? Now I'm not too sure which font is being actually rendered.

enter image description here

1
Does your system have Helvetica installed and is it available for the browser? If it isn't, the next item in the font list is chosen, and sans-serif is the default sans serif font in your system; usually Arial.CoderCharmander

1 Answers

2
votes

Because your system doesn't actually have Helvetica, so you get the next choice on the list.

Setting the font-family doesn't give the user those fonts, it's a suggestion to the client as to which font to use and then suggestions on which to use if the first choice isn't available.

Windows computers aren't likely to have Helvetica on them, but they will have Arial. Conversely, Macs will have Helvetica, but not Arial. This is why the generic family of sans-serif exists. It tells the system to use whatever the system default sans-serif font is, which on your system is Arial.