CODEWITHSUNDEEP
htmlcssfonts
sanjihan
sanjihan

Reputation: 5992

use font stored in external css

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?

Upvotes: 0

Views: 1155

Answers (1)

Alexandre V.
Alexandre V.

Reputation: 116

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

Upvotes: 1

Related Questions