Guidelines

This site is for tech Q&A. Please keep your posts focused on the subject at hand.

Ask one question at a time. Don't conflate multiple problems into a single question.

Make sure to include all relevant information in your posts. Try to avoid linking to external sites.

Links to documentation are fine, but in addition you should also quote the relevant parts in your posts.

0 votes
27 views
27 views

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?

in General by (275) 7

Your answer

Preview

Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
By submitting this post you agree to our Terms & Conditions.
To avoid this verification in future, please log in or register.

1 Answer

0 votes
 

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.

by (275) 7
edited by
...