CSS Fonts

Font Problems

As mentioned in CSS Properties, the CSS font-family property should be given a list of fonts, so the user's browser can try several options to find the “best” one available on their computer.

That leads to long CSS rules like font-family: "Helvetica", "Arial", sans-serif; and you still don't really know if their browser will have a font you like, or simply fall back to the generic font family at the end of the list.

It would be much nicer if we could load a font into the user's browser the same way we load an image or stylesheet…

Loading Fonts

It actually is possible to load font with CSS. There are several online font repositories, most notably Google Fonts that will help you. They will provide CSS links that you can insert to get the fonts you need.

For example, I found a font “Open Sans” in Google Fonts. When I selected the versions of the font I wanted (normal, italic, bold, …), it gave me a stylesheet link that I can put before my own:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" />
<link rel="stylesheet" href="mystyle.css" />

Their CSS magic they provide will make sure the user has that font available (if their browser is in any way capable of displaying the font). Then we can use it in our stylesheet (presumably mystyle.css, based on the above) easily:

body {
  font-family: "Open Sans", sans-serif;
}

You should still include a generic font family, just in case something goes wrong. Also be aware of the size of the font download: you could make pages that are very slow to load by including many fonts.

This Guide uses the Source Sans Pro and Source Code Pro fonts from Google Fonts and uses them in its main stylesheet like this (simplified):

body {
  font-family: "Source Sans Pro", "Helvetica", sans-serif;
}
code, pre {
  font-family: "Source Code Pro", "Courier New", monospace;
}