5

How is one supposed to load google fonts, Do I really have to download and package every font I use with my app? I'm trying to avoid packaging the fonts since they are so many that my app would be huge (it's a web editor)

<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

> Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Nunito' because it violates the following Content Security Policy directive: "style-src 'self' data: chrome-extension-resource: 'unsafe-inline'".

I thought I could load it as a blob but I'm not sure if it can be done. The data is downloaded but there are no changes, I have tried this:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.googleusercontent.com/static/fonts/nunito/v4/0rdItLTcOd8TSMl72RUU5w.woff", true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
    console.log("STATE", xhr.readyState);
    if (xhr.readyState == 4) {
        var myfontblob = window.webkitURL.createObjectURL(xhr.response);
        $("<style>").text("@font-face {\
            font-family: 'Nunito';\
            font-style: normal;\
            font-weight: 400;\
            src: '"+myfontblob+"' format('woff');\
        }").prependTo("head");
    }
};
xhr.send();
shuji
  • 7,369
  • 7
  • 34
  • 49
  • Well, if it's a blob you have to access it through `xhr.response`. – Josh Lee Nov 15 '13 at 01:25
  • @JoshLee I'm trying to avoid packaging the fonts since they are so many that my app would be huge (it's a web editor) – shuji Nov 15 '13 at 01:32
  • 1
    NOT a duplicate of the extension question -- due to CSP working differently. – Vincent Scheib Nov 16 '13 at 00:51
  • 1
    @JoshLee is a bit different topic here I see **shuji** is asking for Packaged App in Google Chrome and not for Extensions. In Google Chrome Packaged App and Extensions are two different concept. – gabrielem Feb 15 '14 at 23:26

3 Answers3

3

Using sandbox is not a good way

it can expose your application to attack and security issue.
This is wy in Chrome App Environment, CSP are so strict.

Content Security Policy (CSP)

When you load something with XMLHttpRequest(); like Mud has sayd you have to take care about CSP. To learn more about it I suggest this blog post on html5rocks.com by Mike West from Google Team.

But, if you are targetting Google Chrome App they is a different concept from Extensions and have different rules.

Setting the permission in the manifest.json

In the manifest.json for Chrome App you can't any more set directly the environment for content_security_policy. But you can add some permissions to the uri you want to add at the whitelist of your Content Security Policy. Doing it is easy, just add to your manifest.json an array of whitelist uri in the key "permissions" like this:

{
  "manifest_version": 2,
  "name": "Your Awsome App Name",
  "version": "1",
  "permissions":[
  "http://localhost/",
  "http://youraswomedomain.io/"

  ],
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  },
  "minimum_chrome_version": "23",

  "icons":{
      "16": "icon_16.png",
      "128": "icon_128.png"
  }
}

If using Angular.js you will have a tag: ng-csp that work with CSP directly out of the box! You just need to place the tag in the body or in the palce where you will istanziate the ng-app.

gabrielem
  • 560
  • 5
  • 13
3

I believe this should work for a Chrome packaged app. You will need to whitelist the URL in your manifest (https://developer.chrome.com/apps/app_external) and then use a bit of JavaScript that looks like this:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.googleusercontent.com/static/fonts/nunito/v4/0rdItLTcOd8TSMl72RUU5w.woff", true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
    console.log("STATE", xhr.readyState);
    if (xhr.readyState == 4) {
        var myfontblob = window.URL.createObjectURL(xhr.response);
        var newStyle = document.createElement('style');
        newStyle.appendChild(document.createTextNode("\
        @font-face {\
            font-family: Nunito;\
            font-style: normal;\
            font-weight: 400;\
            src: url('" + myfontblob + "') format(woff);\
        }\
        "));
        document.head.appendChild(newStyle);
    }
};
xhr.send();
robdodson
  • 6,616
  • 5
  • 28
  • 35
  • just note that you need to get the urls of the actual woff files for your font as mentioned in http://stackoverflow.com/a/19243566/176140 – schellmax Jan 18 '16 at 16:17
0

You should be able to just modify your manifest's content security policy to allow from the google font site like so:

"content_security_policy": "script-src 'self' http://fonts.googleapis.com; object-src 'self'"

See the similar question here: Google Chrome Extensions with Typekit Fonts

Community
  • 1
  • 1
Mud
  • 72
  • 7