在内容脚本的关联CSS中使用@import

Question

我正在构建一个chrome扩展程序，其中包含一个链接到CSS文件的内容脚本。那是我的清单文件：

{
  "manifest_version": 2,
  "name": "Cool name",
  "version": "1.0",
  "permissions": [
    "http://*/*",
    "https://*/*",
  ],
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "jquery.js",
        "contentScript.js"
      ],
      "css": [
        "styles.css"
      ]
    }
  ],
  "web_accessible_resources": [
    "styles.css"
  ]
}

这些是styles.css：

的内容

@import url(http://fonts.googleapis.com/css?family=Pacifico);

.testClass {
  font-family: Pacifico;
}

正如您所看到的，我正在尝试将Google字体导入我的CSS文件中。但是，字体似乎无法加载，因为当我尝试使用此字体时，通过使用内容脚本将testClass应用于某些文本元素，没有任何更改（如果我使用任何其他标准Web字体它有效。）

可能是因为chrome不允许@import在扩展上下文中执行吗？

我尝试将以下行添加到我的清单文件中：

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

但它没有帮助。

我做错了什么？

感谢。