How to Fallback to Different Stylesheet and JavaScript If CDN Fails

Including some CSS stylesheets and JavaScript static files such as Bootstrap and JQuery are very common in HTML pages. There are many reasons that causes CDN sites become unavailable or down. Consequently if your pages fail to download these files, certainly your pages fail to render properly. For some professional, enterprise or business critical websites it is almost a must to ensure these static files are downloaded without failure.

Below are some of the ways how to fallback CSS stylesheets and JavaScript static files to local or different CDN sources using only JavaScript.

Fallback CSS Style Sheets download

Here is example code snippets that fallbacks CSS stylesheets usually goes into HTML head.

Fallback JavaScript download

Here is example code snippets that to fallbacks JQuery and Bootstrap downloads. These code usually go into HTML head or at the end of HTML body.


Fix TTF and WOFF @font-face 404 Not Found Errors

If you are experiencing TTF and/or WOFF web fonts or @font-face throwing 404 Not Found errors when running a web application on Windows Server with IIS 6 or 7. You can see the warnings in Chrome or using Firefox Firebug add-on. You can fix it by adding TTF and WOFF MIME types in IIS. To do that follow this easy step:

Option 1: Add MIME Types using IIS Manager

  1. Start IIS Manager in your Windows Server (or Windows 7/8/10)
  2. Go to root node (browse to your website if you want this change only to apply to specific website)
  3. In the middle pane, under IIS section, open MIME Types feature/module
    Fix TFF and WOFF @font-face 404 Not Found Errors - Open MIME Types in IIS 1
  4. On the right sidebar, click Add… action and enter:

    • For TTF, File name extension: ttf, MIME type: application/x-font-ttf
    • For WOFF, File name extension: woff, MIME type: application/x-font-woff
    • For WOFF2, File name extension: woff2, MIME type: application/x-font-woff2
  5. Click OK button and this issue should have been solved
  6. Refresh your website and you should no longer see 404 Not Found errors
  7. In case the errors still there, check if the actual font files are available

Note: Chrome may continue showing warnings if you enter application/x-woff instead of application/x-font-woff MIME type.

Option 2: Add the MIME Types in Web.config

  1. Open Web.config file usually resides in your website root folder
  2. Under system.webServer/staticContent nodes, change or add the following codes:
  3. Save and refresh your website and see the issues have been resolved
  4. But if the problem is not resolved, you may need to add the following security section as well under system.webServer node: