2

I'm currently working on an ASP.NET MVC application and I'm trying to include a google font into my bundleconfig.cs.

Unfortunately it does not work as expected. I'm getting this error:

The URL 'https://fonts.googleapis.com/css?family=Rokkitt:200,300,400,700' is not valid. Only application relative URLs (~/url) are allowed. Parameter name: virtualPath

My current coding in RegisterBundles method in BundleConfig.cs looks like this:

    string[] libraryCssList = new string[] 
    {
       "~/Content/css1.css",
       "~/Content/css2.css",
    }; // works fine

    // error begins:

bundles.UseCdn = true;

    var fontRokkittCss = "https://fonts.googleapis.com/css?family=Rokkitt:200,300,400,700";

    bundles.Add(new StyleBundle("~/Content/libraryCss")
    .Include(libraryCss)
    .Include(fontRokkittCss));

Do you know how to include google font api into a bundle config in asp.net mvc 4?

Thank you!!

john.1020
  • 135
  • 4
  • 11
  • 1
    can you just save the css file and include it in your project? – Jeric Cruz Feb 02 '18 at 09:13
  • I believe only local files can be bundled together. Try to create a separated bundle for the font. – Bruno Quintella Feb 02 '18 at 09:20
  • are you running it in debug mode? – Jeric Cruz Feb 02 '18 at 09:25
  • What's the reason for trying to bundle this? Would you not want to reference the fonts in a link block in your page layout? You can do so via their fonts.gstatic cdn – Emma Middlebrook Feb 02 '18 at 10:25
  • Similar issue: https://stackoverflow.com/questions/13682671/absolute-url-in-asp-bundle. I think it's better to include local copy instead relying on CDN (not all CDN URLs can be parsed, it must include path to actual file instead of query string as reference). – Tetsuya Yamamoto Feb 02 '18 at 23:17

1 Answers1

0

In the RegisterBundles method, you must set the BundleCollection.UseCDN member variable to true. Example below, note the use (and non-use) of the Include method:

public static void RegisterBundles(BundleCollection bundles) {
    bundles.UseCdn = true;

    // SCRIPTS
    const string boostrapCdnPath = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/js/bootstrap.bundle.min.js";
    bundles.Add(new ScriptBundle("~/bundles/bootstrap.bundle.min.js", boostrapCdnPath));
    bundles.Add(new ScriptBundle("~/bundles/someLocalScript").Include("~/scripts/someLocalScript.js"));

    // STYLES
    bundles.Add(new StyleBundle("~/bundles/GoogleOpenSans", "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"));
    bundles.Add(new StyleBundle("~/bundles/bootstrap.min.css", "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css"));
    bundles.Add(new StyleBundle("~/bundles/bootstrap-icons.min.css", "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.4.0/font/bootstrap-icons.min.css"));
}
BassGod
  • 151
  • 1
  • 11
  • Note that the ending of first argument to the StyleBundle method can seemingly be named whatever you want (e.g. ~/bundles/anyNameYouWantHere), with or without an "file extension". However, if you do add a "file extension", you can't do a suffix of .css on local styles. It causes a 404. I think that's a bug with ASP.NET, would need to look into it further though to be sure. – BassGod Apr 13 '21 at 20:07