search

jonkemp / gulp-inline-css

Inline linked css in an html file. Useful for emails.
MIT License
272 stars 29 forks source link

Error on style @import font #54

Open srocerer opened 6 years ago

srocerer commented 6 years ago

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]-->
neemzy commented 2 years ago

@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:wght@400..700&display=swap');

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