How do you combine custom font-face with bootstrap's glyphicons

Question

I did something like this

@font-face{
  font-family:"MYFONT" !important;
  src: url("/assets/MYFONT.otf") format("opentype") !important;
}

And then I added

*{
  font-family:"MYFONT", sans !important;
}

It obliterated the glyphicons from Bootstrap.

How do I globally declare my font and yet keep the bootstrap glyphicon from being destroyed throughout my site?

Thanks.

Answer 1

The problem is *, because it sets the font-family for all elements.

The quick fix is to do it like this: body { font-family:"MYFONT", sans; }

The correct fix is to use the LESS/SASS version of bootstrap and change the variable @font-family-sans-serif to use your custom font.