Unicode Characters From CSS "Sometimes" Render As Gibberish (â–¾)

Question

The problem is that sometimes, randomly (approximately in 1 out of 100 page refresh), the unicode characters in my page appear as gibberish (you will probably have to zoom in to see it clearly). More specifically, the unicode characters are rendered as â–¾. I don't know what it means or why it could be happening. The characters that break are the sort indicators on the columns, and the tick of the checkboxes.

I use DataTables UI library with its bootstrap integration, and the definition of these characters/signs come from dataTables.bootstrap5.css. There is no network issue, and css file gets served to the client when the issue happens. However, the content of the css file gets broken (see DevTools inspection comparison in the image).

The back-end of the project is asp.net core 7, and it's an MVC project. In the head section of the project, I already have this specified to support utf8 character set: <meta charset="utf-8" />

I have tried replacing the arrows in css with unicode characters like "\f0d8" (this is "caret up" symbol), but it just appeared as squares.

Please note, this question is NOT code-related, so please don't flag the question with "code needed".

Answer 1

Here is the code that fixed the problem on ASP.NET Core 7;

var provider = new FileExtensionContentTypeProvider(); // (to specify content type and charset for css responses)
provider.Mappings[".css"] = "text/css; charset=UTF-8";
app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});

This updates the static file server middleware to append Content-Type: text/css; charset=UTF-8 header data when serving static files with .css file extension. Content type was already being set correctly before, but charset was not being specified, which was causing the issue on Google Chrome. Explicitly specifying charset solved the issue. Thank you @Cbroe