Google fonts not showing on Firefox (duplicated)

Question

i'm working on a project and Google fonts aren't showing on firefox, but work perfectly on the other browsers (safari, chrome, opera.). I tried to find the solution from this question: Google font not showing in firefox , and i changed some things on the "about:config" (security.sandbox.content.level = 2). This is the firefox error:

Error in parsing value for ‘font-family’.  Declaration dropped. style.scss:55:25
Error in parsing value for ‘font-family’.  Declaration dropped. style.scss:67:5
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fonts.gstatic.com/s/overpass/v10/qFda35WCmI96Ajtm83upeyoaX6QPnlo6_PPbPpqK.woff2. (Reason: CORS request did not succeed). Status code: (null).

downloadable font: download failed (font-family: "Overpass" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: http://fonts.gstatic.com/s/overpass/v10/qFda35WCmI96Ajtm83upeyoaX6QPnlo6_PPbPpqK.woff2
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fonts.gstatic.com/s/overpass/v10/qFda35WCmI96Ajtm83upeyoaX6QPnlo6G_TbPpqK.woff2. (Reason: CORS request did not succeed). Status code: (null).

downloadable font: download failed (font-family: "Overpass" style:normal weight:700 stretch:100 src index:0): bad URI or cross-site access not allowed source: http://fonts.gstatic.com/s/overpass/v10/qFda35WCmI96Ajtm83upeyoaX6QPnlo6G_TbPpqK.woff2 

I imported the fonts with the "link" tag:

 <link rel="preconnect" href="//fonts.googleapis.com">
  <link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap" rel="stylesheet">

These are the websites i visited: https://support.mozilla.org/en-US/questions/1188968 https://support.google.com/webdesigner/thread/272921/google-fonts-not-loading-properly-in-safari-and-firefox?hl=en Why aren't Google Fonts caching on Firefox?

Have a nice day.

Answer 1

A 'level' value reflects unique sandbox security settings for each platform and process. You have set security.sandbox.content.level = 2 which limits the read/write limitations of a website. You should change it default to 6. The lesser will be the number, the more read access the website will have to any 3rd party library.

The sandbox security settings is meant for development purposes only in a stand-alone application, don't use when using 3rd party library like bootstrap, google fonts, etc.

Your code is fine! No problem.

Good Luck :)