0

I have a Style.css on my MVC project as well as Bootstrap.css. In my BundleConfig I do the following:

            bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.min.css",
                  "~/Content/animate.css",
                  "~/Content/myproj/common.css",
                  "~/Content/style.css"));

and in my views I do:

@Styles.Render("~/Content/css")

Now, the problem I am facing is that the fonts on my page when it is run locally looks a bit different from the one I have deployed to Azure. So when I looked at the devtools, on the Azure version there are a lot of references to bootstrap, but on the local I see it referring style tag. I attempt to attach screenshots here.

Can you please guide me on how I can fix this? Thank you.

This is the local Devtools result

This is how it looks like locally

This is the Azure version

This is how it looks like when deployed to Azure

Stackedup
  • 680
  • 2
  • 9
  • 26
  • 1
    You haven't really provided the code (css) that show what *font-family* you're trying to use. It's possible you aren't deploying the font with your application. – Erik Philips Feb 25 '19 at 21:31
  • @ErikPhilips thanks for the reply. I am not a front end dev, but by looking at the style.css, I see at the top the two line:import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); – Stackedup Feb 25 '19 at 21:41
  • Bundling may be removing `@import` or some how making it invalid. It may not be the case but take a look at [https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file](https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file). – Erik Philips Feb 25 '19 at 22:39
  • @ErikPhilips thanks again. I believe that is what I am doing. It seems to be related to BundleTable.EnableOptimizations that jonathan has mentioned. – Stackedup Feb 25 '19 at 22:57
  • 1
    Pretty much [don't use @import if you're going to use the bundler](https://stackoverflow.com/questions/27569633/bundletable-enableoptimizations-true-breaks-jquery-ui-all-css). – Erik Philips Feb 25 '19 at 23:06
  • Thank you very much @ErikPhilips. Yes, I ended up removing those imports and added to the top of my layout. If you promote your reply to solution I can mark it as answer. – Stackedup Feb 25 '19 at 23:22

1 Answers1

1

Are you building debug locally, and release when you publish? If so, it might be because of different bundling behaviour for the different targets. See: Bundling not working in MVC5 when I turn on release mode

Jonathan
  • 4,916
  • 2
  • 20
  • 37
  • Thank you for your reply @Jonathan. I think I am closer to the solution. So in my BundleConfig I have #if !DEBUG BundleTable.EnableOptimizations = true; #endif ...................If I set the above to false, then it will work as expected. But then I lose the benefit of optimization, don't I? – Stackedup Feb 25 '19 at 23:02
  • For what it's worth, I prefer to use Grunt / Compass for optimizations and bundling. I just find that I have had less issues with it versus the in-built Microsoft optimizer – Jonathan Feb 25 '19 at 23:25
  • No worries thank you. It will be a bit of scary change for me at this stage. – Stackedup Feb 25 '19 at 23:28
  • Finally I fixed this as there was a problem with my fonts and folder structure affecting the bundling. – Stackedup Oct 30 '20 at 03:09