AMP page error "invalid tag error" @charset

Question

How can I resolve the @charset “invalid tag error” on my AMP page?

Here is the line of code on the page that is causing the issue:

<style amp-custom>
    @charset "UTF-8";
    (...more CSS...)
</style>

Answer 1

According to MDN, @charset:

cannot be used ... inside the <style> element where the character set of the HTML page is relevant.

https://developer.mozilla.org/en-US/docs/Web/CSS/@charset

Since AMP pages are required to be UTF-8 encoded and they use meta tags to specify such, this falls under the case where the "character set of the HTML page is relevant".

In short, AMP pages are not allowed to use @charset in a style tag.

Remove the @charset declaration from inside if your style tag, and the error will go away.

You can use the AMP Validator to help debug.