I get the following error in Firefox (and similar error in Safari and Chrome) when loading the top page of my site:
The resource from “https://fonts.googleapis.com/css?family=FontAwesome&display=swap&subset=latin,latin-ext”
was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
When you load that googleapis URL, it says “Missing Font Family.”
How should I proceed to fix this?
I believe this is likely related to your server configuration given the mention of nosniff in the error message.
It’s unlikely they will want to change their server configuration and that is actually a safety feature. If you Google that error it seems a lot of people have had this and it is not specific to Blocs. They seemed to employ workarounds by minifying content and avoiding comments in the CSS.
My best guess is that you have applied some custom setting on the site that is causing a problem and the web developer tools will probably reveal what it is.
The only settings would be in Blocs.
I am only using FontAwesome for Icons on that page.
Also, the entire page is Minified in Blocs, and since I am only using Icons here, I did not insert any CSS “comments.”
If I had to place a wild bet I would try without lazy load enabled. Cache bust is generally only useful during development and I always switch it off after the site goes live. I remembered that your website seemed more complicated than the average, so I figured you might have some external custom side that might be causing problems.
There is a decent explanation here regarding general causes for the no sniff mime error Javascript MIME type mismatch error after server move - CiviCRM Stack Exchange
I disabled Lazy Load & Cache Bust, then exported and tested in Safari, but it still gives me the same error. 
Well, I appreciate your help.
Can you let me have the url for the page in question?
Is that your site? I thought it was some security testing site when I saw the title. All clear now. I’ll investigate.
Yes, that is the site I built in Blocs and the topic of this thread.
When I view the site in Safari I hit a whole load of errors, but that is primarily caused by Wipr that is blocking content. It gives you an idea of potential problems though.
On Firefox it only lists the Google fonts error and there is actually a more info link that explains what is involved X-Content-Type-Options - HTTP | MDN
It also shows a number of Cors related warnings for cross origin issues related to content. I have seen similar problems in the past from my Rapidweaver days related to fonts that were showing up correctly in Safari but not in Firefox and the issue was fixed at the time with an adjustment in the .htaccess file. Again there is an explanation here Reason: CORS request did not succeed - HTTP | MDN
I would be inclined to query this with your web host as a first step and just see what they say. The basic issue is that for whatever reason your website is failing to connect with external Google sources in the correct manner. That could be down to path issues, network related or other points. I don’t think this is specifically down to Blocs or there would likely be lots of users with the same issue.
If you want to get rid if that immediate problem with the Google fonts I think you could do worse than hosting the same fonts locally, rather than trying to retrieve the CSS from Google. I always use fonts hosted on the server, rather than relying on callouts to other services and it seems to be a lot more reliable.
How would I then add the same icons to the page in Blocs if I hosted FontAwesome on my Superior-Host server? Right now, I just add the icons and let Blocs generate the required code.
Hang on a minute, my first cup of coffee is kicking in. If I go to that error and click on the link it leads directly to a a 400 page error https://fonts.googleapis.com/css?family=FontAwesome&display=swap&subset=latin,latin-ext
It strikes me that the problem is with the items not being on the Google site for whatever reason. Either your path is wrong or it has been removed. I would try adding it again from scratch.
To be honest, I never thought about FontAwesome code errors before. I accidentally noticed them today. But it seems unrelated to Blocs in that FontAwesome appears not to be hosted on Google at all. Was it ever? Even so, Blocs seems to be generating code that links FontAwesome to Google. I’m confused.
Yes it does seem odd. I never associated font awesome with Google. Can you pinpoint exactly on the page where the content is affected? I see no obvious issues, such as missing graphics or text.
If this really is broken, why then do my FontAwesome icons continue to display?
I am totally and utterly confused!
Here’s a cut-down version of the Blocs document (only the top page of the site we’ve been talking about):
https://kiramek.com/21test95/Test.zip
It’s big because Blocs won’t remove all the linked graphics from the pages I had to manually delete. Boy I wish that could be fixed! Anyway, maybe people who look at my document might have some insight into what’s going on here.
Thanks for your help, @Flashman!
I cannot see any problems with the icons on the page. They all appear to be added normally and preview correctly inside Blocs, yet when viewed on the local host via the browser flag all the same errors.
I just scanned the site with Scrutiny, which is a brilliant tool for diagnosing issues and it immediately popped up with this message that I do not see on my own sites.
I’ll send you a PM with what I find.
