CSS import external URL not working

Hi all,
My site's template includes some @import URL statements in the CSS. These are causing issues as can be seen here:
http://markpeskir.com/Content/css?v=vNw3F7GqOkzXKjuBeDREdQ_Eu5oAr8ZRkaHdOG31b2E1

Should I change code, or is there a setting to enable this to work? Is this obsolete technology now? I'm 90% programmer, 10% designer, so ELI5. Thanks!

 

@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">

etc.

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...