What Is the CSS @charset Rule and Where to Use It

The CSS @charset at-rule is used by developers to specify the character encoding of an external stylesheet. This rule ensures that browsers correctly interpret characters outside the basic ASCII range, such as accented letters, non-Latin scripts, or symbols used within CSS content properties. To function properly, it must be the very first element in the stylesheet, written exactly at the first line and first character without any preceding whitespace or comments.

What Is the @charset Rule?

The @charset at-rule defines the character set used by the CSS file. When a browser loads a stylesheet containing special characters—such as UTF-8 icons, localized fonts, or generated content in ::before and ::after pseudo-elements—it needs to know how to decode those bytes into readable text.

A standard declaration looks like this:

@charset "UTF-8";

If the stylesheet does not declare an encoding, the browser attempts to determine it through other methods, such as the HTTP Content-Type header, the HTML document's charset, or by falling back to UTF-8.

Where Must It Be Declared?

The @charset rule has the strictest placement requirements of any CSS rule:

  1. Absolute Start of the File: It must be placed at the very beginning of the stylesheet. There cannot be any empty lines, spaces, or CSS comments before the @charset declaration.
  2. First Line, First Character: The character @ must be byte zero (character index 0) of the file, with the exception of an optional Unicode Byte Order Mark (BOM).
  3. Before Any Other Rules: It must precede all other CSS rules, including @import, @layer, variables, and style declarations.

If any character, comment, or whitespace appears before @charset, the browser will ignore the rule entirely.

Syntax Requirements

The syntax for @charset is case-sensitive and rigid:

  • The keyword must be written in lowercase: @charset.
  • It must be followed by a single space.
  • The encoding name must be enclosed in double quotes ("). Single quotes (') are invalid.
  • The statement must end with a semicolon (;).
  • No alternate character encodings or multiple @charset rules are permitted in a single file.
/* Correct */
@charset "UTF-8";

/* Incorrect: Single quotes */
@charset 'UTF-8';

/* Incorrect: Preceding comment */
/* Stylesheet */
@charset "UTF-8";

How Browsers Determine Stylesheet Encoding

Browsers use a specific order of precedence to determine CSS character encoding:

  1. The character set specified in the HTTP Content-Type header (e.g., Content-Type: text/css; charset=utf-8).
  2. The @charset at-rule at the beginning of the file.
  3. The charset attribute of the <link> element in the HTML document (deprecated in modern standards).
  4. The character encoding of the referring HTML document.
  5. The default fallback, which is UTF-8.

Because HTTP headers take precedence over @charset, the rule primarily serves as a safeguard when stylesheets are loaded locally, served over CDNs without explicit headers, or imported across different domains.