use font stored in external css

Question

How do you reference font from a css file? For example, I have css file with the following structure:

fonts.css file
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
    }

How do I use this font in other css files?

As long as you load this first, you just use the `font-family` name you've added ('Open Sans', in this case). — Tieson T., Nov 02 '16 at 08:12
Possible duplicate of [How to add some non-standard font to a website?](http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website) — Tieson T., Nov 02 '16 at 08:13

score 1 · Accepted Answer · edited May 23 '17 at 12:19

Here is an example :

@font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
@font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
}
.mystyle {
  font-family: "Open Sans";
  font-weight: 700;
  font-size: 24px;
}

<p class="mystyle">The quick brown fox jumps over the lazy dog</p>

If your want to use it in another CSS file, on your html page you load first the css containing the font faces declaration, then you load the second css using the first one:

<link rel="stylesheet" href="my_font.css">
<link rel="stylesheet" href="my_other_stylesheet_using_it.css">

That way, in the second css you can use the font faces declared in the first css.

You can also import the css containing the font faces declaration into another:

@import url("base.css");

Look at this: include one CSS file in another

use font stored in external css

1 Answers1