Overriding @font-face src URL?

Question

We are using FontAwesome with Bootstrap. However, when we try to use FA with our custom minifier, it attempts to load the fonts from a relative path, which returns a 404, due to the way the minified URL structure is setup.

So we figured the best way to fix this was to add an additional CSS file to our minify list that would override the @font-face src URLs that FontAwesome's font uses. We basically just copied the @font-face definition from FontAwesome, and specified absolute URL locations.

However, now what happens is our correct URLs load the fonts AND the originally specified URLs from the FontAwesome CSS are attempted (resulting in the same 404 errors as before).

Are we doing something wrong, or is there really no way to override the @font-face src URLs so that 'upstream' definitions are totally ignored?

Answer 1

Simple override the font-family of the base CSS class:

.fa {
  font-family: 'FontAwesome2' !important;
}

Then, paste/include and edit the font definition:

@font-face {
  font-family: 'FontAwesome2';
  src: url('//host.domain/yourpath/fontawesome-webfont.eot?v=3.1.0');
  ...
  font-style: normal;
}