gulp-inline-css icon indicating copy to clipboard operation
gulp-inline-css copied to clipboard

Error on style @import font

Open srocerer opened this issue 6 years ago • 1 comments

Error message:

Message: 8: ")" not found

After added this conditional tags

<!--[if !mso]><!-- -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&amp;subset=latin-ext" rel="stylesheet" type="text/css">
	<style type="text/css">
		@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&amp;subset=latin-ext);
	</style>
	<!--<![endif]-->

srocerer avatar Apr 29 '18 21:04 srocerer

@srocevas I reckon you found a way around this somehow since then, but in case you never figured out the problem, it is caused by the semicolon (;) in your @import statement:

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

You should be able to use the ampersand (&) directly without URL-encoding it to &amp;:

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

In my case, the issue (still) arises because of Google Fonts API v2's use of semicolons in their new syntax for individual weights:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

The only workaround I found so far consists of using a weight range (..) instead:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');

@jonkemp Would it be possible for you to look into this?

neemzy avatar Dec 07 '21 17:12 neemzy