I'm using React Semantic UI with Webpack, and the context I'm deploying to does not allow self-embedded fonts (data:application/x-font-ttf), but it does allow relative path fonts, which results in the errors:
Refused to load the font 'data:application/x-font-ttf;charset=utf-8;base64[...]
because it violates the following Content Security Policy directive: "font-src https://locationofmyapp.com https://fonts.googleapis.com https://fonts.gstatic.com".
What's the quickest/cleanest toolset to use to either totally remove the data:application/font-woff and data:application/x-font-ttf components from the stylesheet?
If anyone else comes across this, the problem is that there's a typo in Semantic-UI.
Several of the files contain a double semi-colon ;;
To fix the issue:
Remove every file containing the double semi-colon ;;
\node_modules\semantic-ui-css\components\step.min.css
\node_modules\semantic-ui-css\components\step.css
\node_modules\semantic-ui-css\semantic.min.css
\node_modules\semantic-ui-css\semantic.css
Delete the node_modules cache folders:
\node_modules\.cache\default-development
\node_modules\.cache\babel-loader
Restart the dev server (yarn start or npm start)