Why font-awesome works on localhost but not on web ?

Question

I\'m using font awesome in my project(mvc/asp.net). My problem is, I was debugging the project and check on localhost, there was no problem with fo

Answer 1

I had the same problem. The solution:

1. Open CSS file and delete the current font-face section and replace with these:

   @font-face {
   
       font-family: FontAwesome;
       src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */
            url('/Content/fonts/fontawesomewebfont.svg'),
            url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */
       font-weight: normal;
       font-style: normal;
   }
   

   (change the font-face values as you want)

2. Copy your ttf font file on your desktop then convert to eot

   http://www.kirsle.net/wizards/ttf2eot.cgi

3. Convert ttf font file to svg

   http://www.freefontconverter.com/

4. Convert ttf font file to woff (optional)

   http://ttf2woff.com/

5. Drag and drop these all fonts (ttf, eot, svg, woff... ) to your file location when Visual Studio 2012 is open.

6. Publish your project

Answer 2

It depends on this code line in BundleConfig:

        BundleTable.EnableOptimizations = true;

if it is true, you have to change your Font files's path;

../ is shows root path, main folder of your project. And then you have to write rest of the path.

Mine. When it's true:

font-family: 'Icons';
    src:url('../_include/css/fonts/Icons.eot');
    src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'),
        url('../_include/css/fonts/Icons.woff') format('woff'),
        url('../_include/css/fonts/Icons.ttf') format('truetype'),
        url('../_include/css/fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;

When it's false:

font-family: 'Icons';
    src:url('fonts/Icons.eot');
    src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'),
        url('fonts/Icons.woff') format('woff'),
        url('fonts/Icons.ttf') format('truetype'),
        url('fonts/Icons.svg#Icons') format('svg');
    font-weight: normal;
    font-style: normal;

Answer 3

I have tried all suggestions above, and none of them work. Then I tried to move font CSS file to different CSS file, and magic has happen. Everything start to work without any problems. Note you can later on bundle new CSS file through your bundle file.

Answer 4

I had the same problem. Fonts were shown on local properly but when I uploded it to server, only blank squares were shown.
Sometimes it may happen because the filename mentioned in FontAwesome CSS file src attribute is different from the actual font file name. In my case I found it like this in fontawesome css file:

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

But the actual font file names wese like these-

        font/fontawesome-webfont_2d2816fe.eot
        font/fontawesome-webfont_aea8981c.eot
        font/fontawesome-webfont_aea8981c.ttf
        font/fontawesome-webfont_aea8981c.woff
        

though the name didn't match properly in css file after underscore, it was working fine on local. So it was hard to tell what was the probable cause for that.
When I edited the name of file in FontAwesome css file src to the exact actual names, it worked.

Answer 5

this worked for me : < link href="~/Content/font-awesome-4.2.0/css/font-awesome.css" rel='stylesheet' type='text/css' />

I had to link the Directly URl

Answer 6

Nothing realy worked for me. I have a Webform page that hosts an angulular application. The angular application uses the webfonts.

The trick with CssRewriteUrlTransform() was the right direction, but then I found this extension for bundleing that did the final solution!

AspNetBundling

You don't have to use the hole extension, just copy the CssRewriteUrlTransformFixed class and use it instead of the original.