Font-Awesome Error 404 on Fonts

Font-Awesome error 404 on fonts

Add the .woff to your application server mime type(e.g. iis-> mime type) as application/font-woff

NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3

This worked for me:
Add the following lines to your web.config

<system.webServer>
 <staticContent>
   <remove fileExtension=".woff"/>
   <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
 </staticContent>
</system.webServer>

You have to add these lines because by default Apache is not configured with .woff as a default MIME-type. Apache default MIME-type
This holds for IIS as well. As Seb Duggan explains here:IIS default MIME, by default .woff files will not be served by the server.

Font awesome npm not working (fonts give a 404)

Fixed this with:

mix.copy(
    'node_modules/@fortawesome/fontawesome-pro/webfonts',
    'public/webfonts'
);

Font Awesome webfont.woff and webfont.ttf 404 Not Found

Issue is with extending the Bootstrap3_flat theme. I changed this to extend Bootstrap3_blank. See IBM article here: https://wiki.openntf.org/display/EXTLIB/How+to+use+the+Bootstrap3_blank.theme+in+XPages

I also needed to copy the dbootstrap.css file and customize it to remove references to the webfont.woff and webfont.tff files.

After I did this the 404 errors went away.

Getting 404 errors when trying to use Fontawesome fonts locally in express.js framework

You are referencing webfonts at the /webfonts endpoint, but when you do not provide a path as the first parameter, it will be hosted at root. So, either reference the webfonts without the /webfonts prefix, or try giving them an endpoint as the first parameter:

app.use('/Content', express.static(__dirname + '/Content'));
app.use('/webfonts', express.static(__dirname + '/webfonts'));

See Express Docs - app.use

IIS 7 and font awesome .woff 404 error

After doing more research, the reason it was not loading properly was because of Bundling. In have the following in my files:

In my BundleConfig.cs:

bundles.Add(new StyleBundle("~/font-awesome/css").Include("~/fonts/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform()));

In my _Layout.cshtml file:

@Styles.Render("~/font-awesome/css")

I removed the two pieces of code above and added font awesome file directly the _Layout.cshtml file:

<link href="~/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

---

Related Topics