Search code examples
cssfontsfont-face

Use multiple custom fonts using @font-face?

I'm sure I'm missing something really straight forward. Been using a single custom font with normal font face:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

All works fine when I use it but if I want to add another custom font what do I do? I've tried separating by comma the next one or adding a whole other font face but can't get the second font working.

Solution

  • You simply add another @font-face rule:

    @font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

    If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.