使用存储在外部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?

Answer 1

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