CODEWITHSUNDEEP
htmlcssfontsfont-face
Ronan
Ronan

Reputation: 327

Reason for using multiple fonts in CSS

What is the exact reason behind using multiple fonts in the CSS? Is it do with different browsers? Its something I've always just ignored in CSS but I'd like to understand the reason behind doing this now.

body {
      font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
     }

Upvotes: 0

Views: 386

Answers (4)

Pat Dobson
Pat Dobson

Reputation: 3299

The fonts in the list you've shown ( Arial, Tahoma, Helvetica, FreeSans, sans-serif ) are implemented in that order so, if Arial is available, use it, if not, use Tahoma, etc.

The reasoning behind this is you put your prefered font first and, if the end user doesn't have that font installed on their machine then the next one is tried and so on. Generally, the last fonts in the list are so 'standard' that all users will have them ( sans-serif, serif, etc. ) - basically says use a font that is Sans-serif.

A font declaration might look like this:

font-family: "my weird font", "my alternative font", Arial, sans-serif;

SO, if the first two weren't available, 'Arial' would be used - which is generally known as a web-safe font as it ships with the basic insatalls of the vast majority of operating systems.

Upvotes: 1

Popa Andrei
Popa Andrei

Reputation: 338

The reason for using multiple font families is because some operating systems don't have some fonts preinstalled, and when the css doesnt find that font, it searches for the next one and so on.

Helvetica for example doesn't come (as far as I know) shipped with OS X, so the CSS will look for the FreeSans font, and so on.

Multiple fonts are used in that example you posted to keep a sense of consistency for the website. You wouldn't want to use Times New Roman and then use the "default" Comic Sans if the CSS doesn't find Times New Roman Installed.

In technical terms it's called "Fallback" and you can find a more detailed explanation here: http://www.w3schools.com/cssref/pr_font_font-family.asp

Upvotes: 1

Rumen Neshev
Rumen Neshev

Reputation: 26

It's fallback. If the browser don't find the first font, it looks for the next and etc. In you case it will look for Arial and if it finds it it will use it, if not it looks for Tahoma and so on

Upvotes: 0

Kenneth
Kenneth

Reputation: 28747

The reason is mostly because of fallback.

If the user doesn't have a specific font installed it will take the next in the list.

Nowadays this is usually not necessary, since everyone has the basic fonts installed and if not you can tell them to download a font file.

In older browsers, there was no way to tell whether a specific font was installed and you couldn't include a custom font, so this was used to provide a fallback mechanism.

Another reason is that fonts on Mac and Windows are often different (they may be similar looking but have a different name).

Upvotes: 2

Related Questions