Search code examples
htmlcssgoogle-fonts

google fonts - font family is loaded after page, how to fix it?

I'm using google fonts in html:

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

CSS:

    .content-box{
    background: #f0f0f0;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

When I refresh I see my text first in sans-serif for 0.5 seconds (while loading), then it turns to Open Sans

How can I fix that?

Solution

  • Remove display=swap from the href attribute and replace it with dispay=block. That should force the browser to wait until the font is loaded before displaying text.