'Overriding @font-face src URL?

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?

cssfont-awesome


Solution 1:[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;
}

Solution 2:[2]

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.

Solution 3:[3]

If you are using SCSS you likely have a main scss file in your src folder which contains an @import "font-awesome" that imports font-awesome from node_modules/font-awesome/scss/font-awesome.scss.

You can duplicate this font-awesome.scss file into your src folder and customise it. Then you can also duplicate font-awesome/scss/path.scss into your src folder too and customise that.

in main.scss (or whatever your initial scss file is called)

@import "path/custom-fontawesome";

in custom-fontawesome.scss

@import "~font-awesome/scss/variables";
@import "~font-awesome/scss/mixins";
@import "custom-fontawesome-path";
@import "~font-awesome/scss/core";
@import "~font-awesome/scss/larger";
@import "~font-awesome/scss/fixed-width";
@import "~font-awesome/scss/list";
@import "~font-awesome/scss/bordered-pulled";
@import "~font-awesome/scss/animated";
@import "~font-awesome/scss/rotated-flipped";
@import "~font-awesome/scss/stacked";
@import "~font-awesome/scss/icons";
@import "~font-awesome/scss/screen-reader";

in custom-fontawesome-path.scss

$fa-font-path: "../fonts-path";

@font-face {
  font-family: 'FontAwesome';
  src: url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2');
  font-weight: normal;
  font-style: normal;
}

You can customise the path to the font files by setting the $fa-font-path: "../fonts-path";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Xander
Solution 2
Solution 3 Nick

Related Questions