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, du

Answer 1

UPDATE: The "solution" below did not actually work... we did in fact have a typo, but in subsequent testing, this was still not the root cause, and we are still facing the issue.

The solution is to be VERY CAREFUL when overriding the @font-face, making sure to provide all of the same formats used in the original @font-face. Otherwise it appears the browser sees it as a different definition, and will try to download files referenced in both, rather than overriding it.

So here is the definition in FontAwesome's CSS, which is referenced first.

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.1.0');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), 
    url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), 
    url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), 
    url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
  font-weight: normal;
  font-style: normal;
}

And when we tried to override, we accidentally dropped the "format('svg')" definition:

@font-face {
  font-family: 'FontAwesome';
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?v=3.0.1');
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Once we added the format('truetype') definition, we no longer experienced the additional hits that had resulted in 404s.

Answer 2

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;
}