1

How do add multiple font-family to my style sheet using @font-face? Examples shows only single font-family addition like,

@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}

How about for a second font-family say mySecondFont?

OneLearner
  • 63
  • 5

2 Answers2

0

You can always add multiple @fontface in your css provided with the font-family name.

@font-face {
    font-family: myFirstFont;
    src: url(myFirstFont.woff);
    font-weight: bold;
}

@font-face {
    font-family: mySecondFont;
    src: url(mySecondFont.woff);
    font-weight: bold;
}
bhansa
  • 7,282
  • 3
  • 30
  • 55
0

From this article...

you can also define specific properties for the font. The properties that you can set are font-style, font-variant, font-weight & font-stretch. This is helpful especially to use multiple variations of a font under the same name.

So you just keeping using the same font-family value for all your font source files, and make sure to declare the different style properties for each.

Example (from the article):

@font-face {
  font-family: Lato;
  src: local("Lato"),
       url(/assets/fonts/Lato.woff2) format('woff2'),
       url(/assets/fonts/Lato.woff) format('woff');
}
@font-face {
  font-family: Lato;
  src: url(/assets/fonts/Lato-LightItalic.woff2) format('woff2'),
       url(/assets/fonts/Lato-LightItalic.woff) format('woff');
 font-weight: 200;
 font-style: italic;
}
kleazenbee
  • 21
  • 1
  • 3