Include font with stylesheet

Question

I want my web page to use a specific font (e.g. Open Sans), but even if I define it in my stylesheet

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

the font will only be used if it's actually installed on the user's computer.

Is there a way to include the font with my stylesheet?

Answer 1

You can't exactly include the font with the stylesheet, but you can use an @font-face rule to define a custom font family where you reference a font file in web open font format (WOFF).

@font-face {
  font-family: MyCustomFamily;
  src: url('/myfont.woff');
}

The font file must be stored on your webserver (e.g. alongside the stylesheet) and will be automatically downloaded and used by the browser.

That custom font family can then be used in your stylesheet like any other font family:

body {
  font-family: MyCustomFamily, Arial, Helvetica, sans-serif;
}

Note that it's still recommended to have the proper generic font (for Open Sans that would be sans-serif) and maybe also the commonly used fonts for major operating systems as fallback, since not all browsers support WOFF (see here).

You can generate a WOFF file from a TrueType or OpenType font with a tool like FontForge.

Beware that you still need to adhere to the licensing terms of the font(s) you're using. For Open Sans fonts that would be the Apache License.