CODEWITHSUNDEEP
htmlcssreactjsfonts
user9437856
user9437856

Reputation: 2388

Fonts rejected by sanitizer in react

I am using react and getting font issues on my page. Before it was working but now I am getting the below error in the console.

I have tried some comments like npm audit --force (something like this not remembers).

Even my images also do not display what I have added from CSS.

downloadable font: rejected by sanitizer (font-family: "Satoshi-Bold" style:normal weight:700 stretch:100 src index:2) source: http://localhost:3000/public/fonts/Satoshi-Bold.ttf downloadable font: rejected by sanitizer (font-family: "Satoshi-Medium" style:normal weight:500 stretch:100 src index:2) source: http://localhost:3000/public/fonts/Satoshi-Medium.ttf

I am using the below font code in css

@font-face {
    font-family: 'Satoshi-Medium';
    src: url('/public/fonts/Satoshi-Medium.woff2') format('woff2'), url('/public/fonts/Satoshi-Medium.woff') format('woff'), url('/public/fonts/Satoshi-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi-Bold';
    src: url('/public/fonts/Satoshi-Bold.woff2') format('woff2'), url('/public/fonts/Satoshi-Bold.woff') format('woff'), url('/public/fonts/Satoshi-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

Any idea how to solve this?

Upvotes: 1

Views: 1536

Answers (1)

Michael L
Michael L

Reputation: 55

I had these same errors loading Google fonts, and solved it by using @import instead of @font-face.:

@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

Upvotes: 1

Related Questions