Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Font as a Resource to avoid CSP Error - GM_getResourceURL

edited November 2016 in Development Firefox
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.

Comments

  • edited November 2016 Firefox
    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 :)
  • edited November 2016 Firefox

    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 fine

    sorry for self-promotion, take a look at my script - twenty SVG are placed quite compactly

    cannot rely nor encourage others

    tastes differ

  • edited November 2016 Firefox

    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.
Sign In or Register to comment.