How do add multiple font-family to my style sheet using @font-face rule?

Question

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?

Answer 1

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;
}

Answer 2

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; }