XF 2.0 Importing remote CSS file

[Brettflan]

I'm trying to import a remote CSS file within the extra.less template. Specifically, a Google font library:

@import url('https://fonts.googleapis.com/css?family=Overpass:300,400,700&subset=latin-ext');

With that added to the top of extra.less, I get a couple of server errors with every page load. The full error:

InvalidArgumentException: Template https://fonts.googleapis.com/css error: Template name '//fonts.googleapis.com/css' contains invalid characters src/XF/Template/Templater.php:551

Stack trace
#0 src/XF/Template/Templater.php(519): XF\Template\Templater->getTemplateData('https', '//fonts.googlea...')
#1 src/XF/Template/Templater.php(1229): XF\Template\Templater->getTemplateCode('https', '//fonts.googlea...')
#2 src/XF/CssRenderer.php(614): XF\Template\Templater->renderTemplate('//fonts.googlea...', Array)
#3 src/vendor/oyejorge/less.php/lib/Less/Tree/Import.php(152): XF\CssRenderer->handleLessImport(Object(Less_Tree_Import))
#4 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(248): Less_Tree_Import->compile(Object(Less_Environment))
#5 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(235): Less_Tree_Ruleset->evalImports(Object(Less_Environment))
#6 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(70): Less_Tree_Ruleset->PrepareRuleset(Object(Less_Environment))
#7 src/vendor/oyejorge/less.php/lib/Less/Parser.php(199): Less_Tree_Ruleset->compile(Object(Less_Environment))
#8 src/XF/CssRenderer.php(330): Less_Parser->getCss()
#9 src/XF/CssRenderer.php(311): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#10 src/XF/CssRenderer.php(235): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#11 src/XF/CssRenderer.php(101): XF\CssRenderer->renderTemplates(Array, Array, Array)
#12 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#13 css.php(30): XF\CssWriter->run(Array, 8, 1, 'b6bf9e4dbbbd542...')
#14 {main}

Is there some other method I should be using to import remote CSS files within one of the ".less" templates?

 

[Brettflan]

Hmm, scratch that, I guess. I was getting that error in XF 2.0.2. I then upgraded to XF 2.0.4, in hopes that that would fix it. I was still getting the error, so I posted this thread for help.

However, after having fiddled around a bit more with some other templates, I found that the error has gone away. It is no longer triggering. Strange. Might be due to caching or something similar, but I assume it was indeed fixed by the upgrade from 2.0.2 to 2.0.4.

 

[Arty]

You shouldn't add that to extra.less because import statements must be at beginning of css, but extra.less is added at the end. Add it to helper_js_global after

<xf:macro name="head" arg-app="!">

 

[Brettflan]

You shouldn't add that to extra.less because import statements must be at beginning of css, but extra.less is added at the end. Add it to helper_js_global after

<xf:macro name="head" arg-app="!">

Thanks for the tip.