Browser: Firefox 121.0
OS: Windows 10
URL: Link to a page that illustrates this issue
Ok, so I made a header and used two Google fonts namely: Satisfy and Roboto Slab.
Satisfy I used for the name/logo and Roboto Slab I used for the menu in the header.
Then I used some css to edit the last item in the menu and make it stand apart + make it Satisfy as well instead of Roboto Slab.
All seemed to work fine until yesterday when I was working on a random page. The page used these two fonts as well. Everything worked as intended and than all of a sudden things broke down.
At first I thought it was a map plugin I was using (Leaflet) because I can’t really remember making any other significant changes. Removing the plugin didn’t work however and things are still broken it seems.
In Firefox dev tools I see the following error message:
The source of 'https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap&family=Satisfy:wght@400; bold&display=swap' was blocked due to a MIME type mismatch ('text/html') (X-Content-Type-Options: nosniff).
I tried Googling for a solution but I can’t really find anything useful. What could cause this problem and does anyone have a solution?
Btw it does look good in the builder itself + preview as well… Only on frontend the fonts are gone as you can see.