CODEWITHSUNDEEP
javascriptcssfont-facecontent-security-policy
Carlos Wilson
Carlos Wilson

Reputation: 13

Content security policy error while loading fonts

I have a local folder called "fonts", containing otf fonts. And I define the font-families using the @font-face rule.

The problem is, I am not getting the fonts loaded, because this error shows in the Chrome console:

Refused to load the font 'data:font/opentype;base64,T1RUTwAMAIAAAwBAQ0ZGINEulzEAAA94AACBwUdQT1MGggFzAACRPAAAKuxHU1VCV7A5EAAAvCgAAApeT1MvMlhzMAgAAAEwAAAAYGNtYXB8/3N7AAAJFAAABkJoZWFkAfQ0RwAAAMwAAAA2aGhlYQeiBSYAAAEEAAAAJGhtdHhDg3HpAADGiAAACHhrZXJug42ekAAAzwAAAG6IbWF4cAIeUAAAAAEoAAAABm5hbWUW0pxRAAABkAAAB4Jwb3N0/7gAMgAAD1gAAAAgAAEAAAABAIMQhDPpXw889QADA+gAAAAAz37b1wAAAADPfxQX/5T+zgRLBCgAAAADAAIAAAAAAAAAAQAAA8D/EAAABGr/lP+NBEsAAQAAAAAAAAAAAAAAAAAAAh4AAFAAAh4AAAADAnwBdwAFAAQCigJYAAAASwKKAlgAAAFeADIBRAAAAAAAAAAAAAAAAKAAAv9AAABbAAAAAAAAAABIJ...cAIv/qATcAI//kATcAKQAHATcALv/kATcAMP/qATcAMv/tATcANf/qATcANv/qATcAOP/xATcAOv/1ATcAPv/1ATcAQP/1ATcAQv/1ATcASP/1ATcATP/1ATcAUv/pATcAU//kATcAW//kATcAYf/kATcAY//kATcAZ//kATcAm//pATcAnP/kATcAn//pATcAoP/kATcAof/pATcAov/kATcAo//pATcApP/kATcAqf/pATcAqv/kATcArf/pATcArv/kATcAt//1ATcAuP/tATcA6f/xATcA7f/xATcA+v/pATcA+//kATcBB//VAUIAAf+jAUIACv+/AUIAHP/uAUIAOv+jAUIAPv+jAUIAQP+jAUIAQv+jAUIASP+jAUIATP+jAUIA9v+lAUgBAv/zAUgBB//bAUgBCv/zAUgBDf/3AUoBAv/zAUoBB//bAUoBCv/pAUoBDP/3AUoBDf/3AUwBAwASAUwBB//JAUwBCv/pAVcBB//JAVgBB//J' because it violates the following Content Security Policy directive: "font-src-https//fonts.gstatic.com https//fonts.googleapis.com".

This also happens with Firefox / Safari.

I added this to my index.html, just under the "title" tag, but not working either:

Can anyone give me a hint, please?

Upvotes: 1

Views: 2370

Answers (1)

Seb Cooper
Seb Cooper

Reputation: 574

Update the meta tag as follows to solve:

<meta http-equiv="Content-Security-Policy" content="font-src data: https://fonts.gstatic.com https://fonts.googleapis.com">

This will allow loading font resources via the data scheme.

For more info on Content Security Policy See: https://content-security-policy.com/

Upvotes: 2

Related Questions