CSS import external URL not working

Discussion in 'Site Programming, Development and Design' started by MarkPeskir, Jun 7, 2016.

  1. @import is not obsolete, but it's complicated to troubleshoot when it's used for a lot of files (because an error in one CSS file causes everything to fail). Also, when you're bundling CSS files like that, everything has to be in a specific order, and breaking that order can, again, cause everything to fail.

    The simplest thing to try would be removing those @imports from the CSS and just using link tags in the document head. Like:

    <link href='//fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href="/font-awesome.min.css" rel="stylesheet">


    The link method usually renders faster than @import in the CSS too, so there's that.

    It's a pain with a third party theme, because if they update that theme you'll have to remove the imports from the CSS again, but if it works for you it may be worth the effort.

    You might also want to tell the theme author about the error and see what they have to say...
    Elshadriel likes this.

Share This Page