Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the problem.
https://i.sstatic.net/moUCR.png
I have provided an example of the problematic text in the code snippet below. Oddly enough, if I delete the word and retype it, the text displays correctly. This particular text was copied from Microsoft Word using the Calibri font. I attempted to apply font-style: normal, but it had no effect. I am puzzled as to what could be causing this issue.
Issue-Free Text: Re-entering the text resolved the issue, but redoing all the content on the live page is not feasible.
body {
font-family: 'Poppins', sans-serif;
}
p {
font-size:20px;
}<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1>With Issue</h1>
<p>Our рrоduсt line is ultіmаtеlу aimed at promoting skin’s nаturаl rеjuvеnаtіоn process tо ѕоftеn ѕkіn, mаіntаіn elasticity, mіnіmіzе thе appearance оf роrеѕ аnd wrіnklеѕ, еvеn ѕkіn tоnе, and еnhаnсе radiance.</p>
<h1>Without Issue</h1>
<p>Our product line is ultіmately aimed at promoting skin’s nаtural rеjuvenаtіоn process tо softеn skіn, maintain elasticity, mіnіmіze thе appearance оf pores and wriпkleѕ, even skіn tone, and improve radiance.</p>