I have the following simplified version of a web site:
<html><head><title>Test (TM)</title></head>
<body style="font-family: Liberation Sans; color: red">
<p>That sounds like the perfect antidote to Reading Fatigue™️.</p>
</body>
</html>
That's a Unicode character U+2122 (which is part of the letter-like symbols block, intended to identify an unregistered trademark). This codepoint is supported by the font I'm using, Liberation Sans, so it should be shown without any substitutions. But for some reason when I view this in Chrome it's not showing the Liberation Sans version but a substantially fatter text that's sized differently and sits closer to the baseline than the version in Liberation Sans. And whatever colour I specify, it's always grey.
Why is this happening? How do I prevent this happening?
Please see my comment to the question. Somehow, you have mistyped the character in question. What you show is not U+2122 (trademark).
Let's see:
<html><head><title>Test (TM)</title></head>
<body style="font-family: Liberation Sans; color: red">
<p>That sounds like the perfect antidote to Reading Fatigue™.</p>
</body>
</html>As you can see running this corrected code sample, this is a real U+2122 trademark character rendered in the color defined by your style.
This is not related to Chrome or specific browsers. There are many characters not affected by the color specified by your font style. Look at this sample:
<html><head><title>Some characters are not like that</title></head>
<body style="font-family: Liberation Sans; color: red">
<p>There are many characters not affected by the color specified
by your font style, for example: 👍🐵🐮🐅,
incl. ™️ (emoji style) trade mark : U+2122 FE0F </p>
</body>
</html>