0

When I run my project locally on Visual Studio 2013, Font Awesome Icons work. However when deployed they are absent.

When run from the server, the IE developer tools shows the Css coming in but there is NO CALL to the fonts. No 404 error! No 403 error! Nothing. It's like the Css is skipping over the @font-face declaration because it does not even try to call the EOT file.

Here are the facts:

  • Mime Types are all added to IIS 7.0 (eot, svg, woff, woff2, ttf)
  • The File structure to css is -- fonts > font-awesome > css
  • The File structure to fonts is -- fonts > font-awesome > fonts
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), 
       url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')

format('svg'); font-weight: normal;font-style: normal; }

Ryan Lege
  • 167
  • 1
  • 2
  • 16

1 Answers1

1

There's really not enough here to say for sure, but if I had to hazard a guess, I'd imagine you're including Font Awesome in a bundle, and the bundle path is breaking the font references.

The bundle path, i.e. ~/bundles/foo is a literal path. When the bundler joins and minifies everything it saves the file to that location. Style bundles typically use ~/Content/foo because of the tendency to reference things like images and fonts in ~/Content. Of course, bundling only happens in production, by default, so it won't affect you in development either way. I'm not sure what you're actually using as a bundle path, but that would be the first place I looked.

Another potential problem is that perhaps the bundle is not being loaded at all. This is common when you accidentally create a bundle path that maps to a physical directory. For example, if your bundle path is ~/Content/fonts, and you have a physical folder named fonts under ~/Content in your project, then your bundle will not be loaded and none of the scripts/css in that bundle would be applied to the page. Make sure your bundle path does not reference a physical directory.

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444
  • That did not work either. The @font-face will not call the url – Ryan Lege Mar 16 '16 at 10:32
  • It's probably quite rare, but what just happened to me was that the FA css file had become corrupted / not uploaded properly. The font src are declared at the end and therefore hadn't loaded. – Martin Hansen Lennox Oct 08 '18 at 20:07