0

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?

haldo
  • 14,512
  • 5
  • 46
  • 52
Infinix420
  • 11
  • 1
  • 3

1 Answers1

0

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.

Robert McKee
  • 21,305
  • 1
  • 43
  • 57
  • When I use @font-face, the font doesn't apply! ```@font-face { font-family: "Product Sans"; src: url(https://fonts.gstatic.com/s/productsans/v12/pxidypQkot1TnFhsFMOfGShVEueIaEx8qw.woff2); }``` – Infinix420 Mar 07 '21 at 07:57