Declare UTF-8 charset — Windsurf

Without an explicit charset declaration, umlauts, emojis, and non-ASCII characters render as gibberish in some browsers and crawlers.

rocket_launch

Fixing this in Windsurf

Codeium agentic AI IDE with Cascade

Windsurf Cascade can walk the entire project and apply multi-file edits in one pass. Paste the prompt below into your Windsurf chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for Windsurf

Copy and paste this into your Windsurf chat exactly as-is.

Using Windsurf Cascade, apply these edits across the project in one pass:

Add charset declaration

1. Add <meta charset="utf-8"> as the first element in <head>.

Why this matters

UTF-8 is the one charset everyone supports. Declaring it explicitly prevents browsers from guessing — and the guess is sometimes wrong, especially for legacy setups.

AI-generated HTML templates include this by default, but some micro-edits can drop it. A quick check avoids the dreaded "�" symbols across your content.

How to use this prompt in Windsurf

1. Open your Windsurf project.
2. Copy the prompt above with the copy button.
3. Paste into the Windsurf chat and send.
4. Review the diff, accept the changes, redeploy.
5. Verify the fix using the checklist below.

Common mistakes to avoid

error_outlinePutting the charset meta after the title — browsers may re-parse the head when they discover it, slowing paint.
error_outlineUsing `iso-8859-1` on modern sites — obsolete, breaks emoji and non-Latin characters.
error_outlineRelying on HTTP header only — in-HTML declaration is a safety net.

How to verify the fix worked

check_circleView source — `<meta charset="utf-8">` is the first element in <head>.
check_circleLighthouse → SEO → "Document has a meta charset" passes.
check_circleCheck content with umlauts, accents, and emojis — all render correctly.

Frequently asked questions

Uppercase UTF-8 vs lowercase utf-8?expand_more

Either works. Lowercase is common convention.

Is HTTP charset header enough?expand_more

Works in most cases, but the in-HTML meta is a safety net for when headers are stripped (e.g., local file viewing).

Want all 34 prompts tailored to your Windsurf site?

Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.

Scan my site

Related Windsurf prompts

Technical