Search code examples
htmlcsswebfonts

Why the Alegreya font doesn't display correctly in some browsers?

I use the following minimal HTML code for reproducing the problem:

<html>

<body>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Alegreya&display=swap" rel="stylesheet">

  <style>
    body {
      font-family: "Alegreya"
    }
  </style>

  <h1>Testing the web font Alegreya</h1>
  Testing the web font Alegreya
</body>

</html>

The document is displayed like this: Opera output

As you can see, there is a weird outline around some letters. This behavior appears only for H1 tags and only for the webfont Alegreya. In normal text, it works. With another font, it works. With the Alegreya font installed on the system, it works too. It has to be downloaded as a webfont to see the bug.

Tested on Windows 10, on two computers. It doesn't work on Opera, Edge and Chrome. It does work on IE and Firefox though.

What's happening here?

Solution

  • I had the same issue. It seems related to the font-weight applied. I fixed it by specifying explicitly the font weight(s) to be loaded in the URL. See the code snippet below.

    <html>

<body>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&display=swap" rel="stylesheet">

  <style>
    body {
      font-family: "Alegreya"
    }
  </style>

  <h1>Testing the web font Alegreya</h1>
  Testing the web font Alegreya
</body>

</html>