Connecting fonts via CSS @import, like this:

@import 'https://fonts.googleapis.com/css?family=Cormorant+Garamond:700';

I use it like this:

 h2, h3 { font-family: 'Cormorant Garamond', serif; }

But the fonts, approximately, once out of 10 are not connected, the browser tries to connect them, but without success, after which the following errors are lit in the console:

Console errors

What do I do wrong?

    1 answer 1

    Try this:

     @import url("//fonts.googleapis.com/css?family=Cormorant+Garamond:700");

    Two differences:

    1. Specify url () when importing - you can import without it, but with it it is more reliable, especially in the case of preprocessors (Sass Stylus Less);

    2. We remove the protocol. We allow the site to interact with Google's api using the same protocol by which the user interacts with the site.

    • Initially, I used url () and used it, but Google gave me the last font without it, I decided to remove. Well, now I will try one-on-one as you advised, after some time, I will unsubscribe. - overtheman
    • The problem became a little less frequent, but it did not disappear completely - = (( - overtheman