Search code examples
character-encodingwebfonts

Why do some characters such as "ç" look different from other characters?


I've got a French text on a website using "Nunito" from Google Fonts.

On Safari, I found out that my text had bolder letters for signs such as "ç" or "é". Looking again, I realized they also differ on other browser, not just as much.

I've tried including the font in different ways (link, font-face), nothing does the trick.

<html>
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Nunito:700&display=swap" rel="stylesheet">
    <style>   
        body {
            font-size:20px;
            font-family: 'Nunito',  Arial, sans-serif;
        }
    </style>
</head>
<body>
    comment ça marche ?
</body>
</html>

In the example, the "ç" looks off.


Solution

  • At some point, I went and typed some text on Google Fonts directly, and it looked right. That got me thinking... And trying at my example again.

    Bing! The text I had was copied/pasted from what the marketing sent me. That text didn't work, while "typed" text did.

    The "ç" in the text I had was charcode 99 ("c") followed by 807 (the cedilla below it). Chrome and Firefox did attach both in an odd way, but it kind of worked, but Safari just ignored it and took the whole sign from Arial.

    The "ç" I typed in Google Fonts for text was the code 231, which is a single character from Latin encoding.