font-face messing up bold directive (bootstrap-wysiwyg)

Question

I'm using bootstrap-wysiwyg inside a popover. Here's a demo (only the bold is actually working). Now as you can see - pressing Ctrl+B will set the text to bold, and pressing again will return it to normal.

That demo is working fine, but in my own project I'm working with local font-faces, i.e.:

@font-face {
    font-family: BerninaSans;
    src: url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.eot');
    src: url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.woff') format('woff'),
         url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.ttf') format('truetype'),
         url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.svg#bernina_sanscondensed_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: BerninaSansBold;
    src: url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.eot');
    src: url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.woff') format('woff'),
         url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.ttf') format('truetype'),
         url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.svg#bernina_sanscondensed_bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

And that somehow screws everything up - I can click Ctrl+B (or the button directly) to make the text bold, but clicking again doesn't return it to normal. It just stays bold. The button itself is behaving weirdly too, turns blue, but changes back to normal the second you press down any other key. I thought setting the font-weight for the second font-face to bold will sort it out because but it doesn't.

I have no idea how to set up that demo to recreate the problem (is there like a... font-face cdn or something?), hopefully someone knows the answer from similar experience or will give a helpful suggestion.

Answer 1

It turns out that I should give them all the same name.

According to this article, the right way to define a bold version for your font-face is to use the same font-family name, but with different attributes. That way, your browser knows that one is a bold version of the other

@font-face {
    font-family: BerninaSans;
    src: url('...');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: BerninaSans; // <----
    src: url('...');
    font-weight: bold;
    font-style: normal;
}

Pretty neat.