Google web font imports breaking with advagg

Question

I'm trying to pass Google Page Insights, and they keep saying we have render blocking CSS. When I try and inline the CSS, it breaks my fonts I'm importing from Google Fonts. I've tried a million combinations, but the inline is the culprit for some reason.

Here is the CSS code from one of the aggregated files:

@import url("http://fonts.googleapis.com/css?family=Pontano+Sans");@import url("http://fonts.googleapis.com/css?family=Roboto");

I tried it with and without quotes.

For the time being, to keep my client happy, I moved the $styles variable below in my html.tpl.php template, right before the close of the body. It works fine, but there is a nasty flicker on the page load before the CSS loads, so inlining makes the most sense to me.

I use Omega 4 and use @import in my SASS.

Answer 1

You'll want to follow this issue https://www.drupal.org/node/2396609 Inline critical css

I'm guessing you're using the "Inline CSS on specific pages" setting on the AdvAgg: Modifications page. If the imports and not working correctly when everything is inlined, please open up a bug report explaining this with a good way for me to reproduce the issue locally.

Also noted that you can use the Adjust CSS location and execution setting to load the css async without having to mess with the tpl file.