WebFont @font-face define serif/sans-serif/monospace

5
votes

I use many web fonts in my site, and now I want to add new font family which has serif/sans-serif/monospace type of font. Part of my css:

@font-face {
    font-family: 'DejaVu', sans-serif;
    font-weight: 400;
    font-style: normal;
    src: url(dejavu/DejaVuSans.ttf)
}
@font-face {
    font-family: 'DejaVu', monospace;
    font-weight: 400;
    font-style: normal;
    src: url(dejavu/DejaVuSansMono.ttf);
}
@font-face {
    font-family: 'DejaVu', serif;
    font-weight: 400;
    font-style: normal;
    src: url(dejavu/DejaVuSerif.ttf);
}

But it doesn't work(In css console I see error like: bad value for font-family). Is there any way to make it work using only one name for font.

I know that I can change font-family name to look like: 'DejaVu Serif' but I don't want to.

1
htmlcssfontswebfonts

1 Answers

3
votes

The answer is no, the only way would be to change the font-family name to include the font definition.

You could set the font-style or font-weight and use those to select your font-face but you can't stack a font-face family.