How to fix Font Awesome WebFont woff2 not working BundleConfig

By FoxLearn 7/8/2024 3:02:12 AM   413
If you are encountering a "404 not found" error for the Font Awesome woff2 file when bundling CSS files in ASP.NET MVC.

Here are a few steps you can take to resolve font Awesome WebFont woff2 not working BundleConfig

- fontawesome-webfont.woff2?v=4.6.3 Failed to load resource: the server responded with a status of 404 (Not Found)

- fontawesome-webfont.woff?v=4.6.3 Failed to load resource: the server responded with a status of 404 (Not Found)

First, Make sure that your web site has not errors while running without bundling css files.

Next, Make sure that the Font Awesome files (including woff2 files) are correctly included in your project and that the paths are correctly referenced in your CSS or HTML files.

You can download Font Awesome directly from their website or use a package manager like npm or NuGet to manage dependencies, then copy the fonts directory to the same project.

Example of how to add Font Awesome to a bundle:

bundles.Add(new StyleBundle("~/Content/fontawesome").Include(
    "~/Content/fontawesome/font-awesome.css"));

Open BundleConfig.cs located in the App_Start folder of your MVC project.

You need to add a CssRewriteUrlTransform to the RegisterBundles method as shown below.

using System.Web;
using System.Web.Optimization;

namespace Invoice
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/login/css")
                .Include("~/assets/css/bootstrap.min.css", new CssRewriteUrlTransform())
                .Include("~/assets/css/font-awesome.min.css", new CssRewriteUrlTransform())
                .Include("~/assets/css/beyond.min.css", new CssRewriteUrlTransform())
                .Include("~/assets/css/animate.min.css", new CssRewriteUrlTransform()));
        }
    }
}

The CssRewriteUrlTransform in ASP.NET MVC Bundling is a useful tool for fixing paths to assets like fonts, images, or other CSS files when bundling CSS files.

CssRewriteUrlTransform is a class provided by ASP.NET MVC that is used within the Include method of a StyleBundle. It rewrites URLs in CSS files when they are bundled and minified.

By following these steps, you should be able to resolve the "404 not found" error for the Font Awesome woff2 file when bundling CSS files in ASP.NET MVC.