"Refused to apply style from because its MIME type "('font/woff2')" is not a supported stylesheet MIME type, and strict MIME checking is enabled"

Issue

I'm trying to use the font Product Sans in my website, and when I use

@import url(https://fonts.gstatic.com/s/productsans/v12/pxidypQkot1TnFhsFMOfGShVEueIaEx8qw.woff2); 

It logs this error in the console:

Refused to apply style from 'https://fonts.gstatic.com/s/productsans/v12/pxidypQkot1TnFhsFMOfGShVEueIaEx8qw.woff2' because its MIME type ('font/woff2') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

However, the font is still actually applied to all the texts, so what's the problem?

Solution

The problem is that https://fonts.gstatic.com/s/productsans/v12/pxidypQkot1TnFhsFMOfGShVEueIaEx8qw.woff2 is a font, and you are trying to import it like it is a CSS file.

Or, reworded... @import imports stylesheets and https://fonts.gstatic.com/s/productsans/v12/pxidypQkot1TnFhsFMOfGShVEueIaEx8qw.woff2 is not a stylesheet.

Please see: How to import Google Web Font in CSS file? on how to import a font from google.

Answered By - Robert McKee