Mozilla Firefox doesn't load Google fonts

Question

I'm using Cairo google font in my project. Everything works fine in chrome but when I tried Mozilla Firefox, the font didn't load.

I got an alert message that says: "Style sheet could not be loaded."

I'm using this method to load Google fonts:

In the head:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Cairo&amp;display=swap" rel="stylesheet">

In the CSS file:

font-family: 'Cairo', sans-serif;

• I tried to add @font-face and self-hosted the font.
• I checked Allow pages to choose their own fonts, instead of your selections above in Mozilla Firefox Settings > General > Fonts > Advanced
• I also used this method to load the fonts :

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

but this didn't solve the problem.

I tested the website on other devices and I still getting the same problem.