In my ASP.NET MVC application, I'm using Bundles to compress css and js files. The problem is - the fonts are not loading after i enable the optimization mode.
BundleTable.EnableOptimizations = true;
Here is the C# code
public static void RegisterBundles(BundleCollection bundles) {
RegisterStyles(bundles);
BundleTable.EnableOptimizations = true;
}
private static void RegisterStyles(BundleCollection bundles) {
bundles.Add(new StyleBundle("~/BundleStyles/css").Include(
"~/Content/Styles/bootstrap/bootstrap.css",
"~/Content/Styles/reset.css",
"~/Content/Styles/gridpack/gridpack.css",
"~/Content/Styles/fontFaces.css",
"~/Content/Styles/icons.css",
"~/Content/Styles/inputs.css",
"~/Content/Styles/common.css",
"~/Content/Styles/header.css",
"~/Content/Styles/footer.css",
"~/Content/Styles/cslider/slider-animations.css",
"~/Content/Styles/cslider/slider-base.css"));
}
And here is the css for fonts.
@font-face {
font-family: ProximaNova;
src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
font-weight: bold;
font-style: normal;
}
Here is how CSS is beeing referenced in the page.
<link href="/BundleStyles/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>
However, when i checked with Chrome Debugger tool, the font files are not loading to the page and my page looks bad with wrong fonts.
What am I doing wrong?
Well, I think the problem is with your font location. I'm assuming that the bundled css virtual location /BundleStyles/css
doesn't actually exist. and if your folders structure like below
Content > Font
Content > style
If this is true, then try this
change /BundleStyles/css
to /Content/css
<link href="/Content/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>
and reference your font like this
src: url('Fonts/ProximaNova/ProximaNova-Bold.otf')
in this case your font will be loaded relative to the "css" file which is located inside the content folder which also contains the "fonts" folder
If what I assumed is incorrect please show us how you structured your files
I think CssRewriteUrlTransform might be the way to go:
https://msdn.microsoft.com/en-us/library/system.web.optimization.cssrewriteurltransform(v=vs.110).aspx
Used like so:
.Include("~/Content/bootstrap-cosmo.min.css", new CssRewriteUrlTransform())
Worked for me.
Great answer above.
An alternative - if for some reason the above didn't work for you - would be to change how the @font-face src property references the 'Fonts' folder. '../'-ing doesn't work very well for bundling so reference directly from the site root folder instead. Assumung the 'Fonts' folder is one down from the root, change this:
@font-face {
src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}
To this:
@font-face {
src: url('/Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}
You will retrieve the same results when the site is ran in debug mode too.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With