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='' rel='stylesheet' type='text/css'>

> Refused to load the stylesheet '' 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", ".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();

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./css?family=Nunito' rel='stylesheet' type='text/css'>

> Refused to load the stylesheet 'http://fonts.googleapis./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./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();

• javascript
• blob
• webfonts
• google-chrome-app

• Well, if it's a blob you have to access it through xhr.response. – Josh Lee Commented Nov 15, 2013 at 1: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 Commented Nov 15, 2013 at 1:32
• 1 NOT a duplicate of the extension question -- due to CSP working differently. – Vincent Scheib Commented Nov 16, 2013 at 0: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 Commented Feb 15, 2014 at 23:26

3 Answers 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. 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.

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

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.googleusercontent./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();

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.; object-src 'self'"

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