Search code examples
htmlcssfontsfont-face

If i'm using a custom font that doesn't exist in googleFonts , Should I give each font-family a different name?


I'm using a font called DejaVuSans and It has different styles (normal , bold , italic , ...) and I'm using some of these styles using multiply font-face

@font-face {
    font-family: 'DejaVu Sans';
    src: url(../fonts/DejaVuSans.eot);
        src: url(../fonts/DejaVuSans.ttf)  format("truetype"), 
             url(../fonts/DejaVuSans.woff) format("woff");
    font-weight:normal;
    font-style: normal;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url(../fonts/DejaVuSans-Oblique.eot);
        src: url(../fonts/DejaVuSans-Oblique.ttf)  format("truetype"), 
             url(../fonts/DejaVuSans-Oblique.woff) format("woff");
    font-weight:normal;
    font-style: italic;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url(../fonts/DejaVuSans-Bold.eot);
        src: url(../fonts/DejaVuSans-Bold.ttf)  format("truetype"), 
             url(../fonts/DejaVuSans-Bold.woff) format("woff");
    font-weight:bold;
    font-style: normal;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url(../fonts/DejaVuSans-BoldOblique.eot);
        src: url(../fonts/DejaVuSans-BoldOblique.ttf)  format("truetype"), 
             url(../fonts/DejaVuSans-BoldOblique.woff) format("woff");
    font-weight:bold;
    font-style: italic;
}

All of them now have the same font family , How could I specify which one I want to use ? Because in this case I will be using the same font-family

<div style="font-family:'DejaVu Sans'"></div>

Now which style would the font of this div be ?

So should I use a different name for each font-face like

@font-face{
   font-family:'DejaVu Sans normal'
}
@font-face{
   font-family:'DejaVu Sans bold'
}
etc ..

Solution

  • The font will depends on what font style or weight you want to put.

    <div style="font-family:'DejaVu Sans'; font-weight: bold;"></div>
    
    <div style="font-family:'DejaVu Sans'; font-style: italic;"></div>