Font as a Resource to avoid CSP Error - GM_getResourceURL
Why don't you use the Google Fonts method ?
https://developers.google.com/fonts/docs/getting_started
Thanks but that is normal way. The problem is I get Content Security Policy (CSP) errors. Basically I am not allowed to link resources from outside domains.
Here is an example of an error trying to use google font.
Content Security Policy: The page’s settings blocked the loading of a resource at https://fonts.googleapis.com/css?family=Tangerine (“style-src 'unsafe-inline' https://assets-cdn.github.com”).
I think I may have found a way, just thought of it while replying. "svg Base64 font" a quick google gets results. I will try it out when I have time and post feedback for you and those who might be interested.
I cannot seem to do it. There plenty of articles on the web on base64 fonts but I cannot get FontAwesome to work at all.
http://sosweetcreative.com/2613/font-face-and-base64-data-uri
https://www.fontsquirrel.com/tools/webfont-generator
In case if you need just "Font-Awesome", I think the better solution would be embedding SVG images into page's HTML, as it's done in Github.
<!DOCTYPE html>
<style>.fa{position: relative; padding: 2px; border: thin solid red;}</style>
Awesome
<svg class="fa fa-ambulance" width=20 height=20 viewBox="0 0 1792 1792"><path fill="#f00" d="M576 1408q0-53-37.5-90.5t-90.5-37.5-90.5 37.5-37.5 90.5 37.5 90.5 90.5 37.5 90.5-37.5 37.5-90.5zm-384-512h384v-256h-158q-14 2-22 9l-195 195q-7 12-9 22v30zm1280 512q0-53-37.5-90.5t-90.5-37.5-90.5 37.5-37.5 90.5 37.5 90.5 90.5 37.5 90.5-37.5 37.5-90.5zm128-672v-192q0-14-9-23t-23-9h-224v-224q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v224h-224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h224v224q0 14 9 23t23 9h192q14 0 23-9t9-23v-224h224q14 0 23-9t9-23zm256-544v1152q0 26-19 45t-45 19h-192q0 106-75 181t-181 75-181-75-75-181h-384q0 106-75 181t-181 75-181-75-75-181h-128q-26 0-45-19t-19-45 19-45 45-19v-416q0-26 13-58t32-51l198-198q19-19 51-32t58-13h160v-320q0-26 19-45t45-19h1152q26 0 45 19t19 45z"/></svg>
Font
Basically I am not allowed…
Yes, Github has paranoic set of CSP rules that disables almost everything :( until you turn off CSP :)
Thanks. The SVG insertion is tedious if it's a lot. One or two it's fine.
Found the base64 solution. I couldn't figure out why the font online conversion sites didn't work but here is the outline for the font.
@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: local("FontAwesome"), url("data:application/octet-stream;base64,d09GRgABAAAAAX7oAA0AAAAChqwABAAHAAA...") format("woff");
}
Yes, Github has paranoic set of CSP rules that disables almost everything :( until you turn off CSP :)
I cannot rely nor encourage others to do that in their browser :smile:
The SVG insertion is tedious if it's a lot. One or two it's finesorry for self-promotion, take a look at my script - twenty SVG are placed quite compactly
cannot rely nor encourage otherstastes differ
sorry for self-promotion, take a look at my script - twenty SVG are placed quite compactly
Nice script :)
It's the extraction and placing them in the code. I wanted to avoid doing that, otherwise I would have used base64 icons as the resource to pull from is endless. FontAwesome seems like a fix for all my scripts. No more images.
tastes differ
No doubt. I would do it for myself, but I cannot rely on Tom, Dick and Harry to read instructions before usage and you must do this and that for my script. :wink:
so, my humble opininion is: if you want to have all 694 awesome font letters, and Github doesn't allow it, write a complaint to UN.
Otherwise, embed SVG.
I have. They are ignoring me.
Font as a Resource to avoid CSP Error - GM_getResourceURL
Is it possible to use font as a resource and insert it in html? I need to do it to avoid CSP errors. I tried using GM_getResourceURL but I couldn't get it to work.