Google Fonts API and Polymer: CORS issues

Question

I've been playing with Polymer recently and finally I think I have my head around the shadow boundary, at least to the extent that I know where I need to include link tags to make my CSS work.

This is fine and dandy but I can't use Google fonts. If I use an @import inside my stylesheet, then as soon as that stylesheet is included in a Polymer custom element I get CORS issues:

XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Maven+Pro:400,700. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64000' is therefore not allowed access

There's an XMLHttpRequest involved here, probably because of how Polymer fetches resources and custom elements in the first place, which I suppose is axing the header mentioned in the error message.

However, if I only use the link method

<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>

This doesn't cross the shadow boundary, and I still don't get my fonts.

Am I missing something obvious? How do I get Google fonts inside the shadow DOM? I tried downloading the zip file from Google Fonts itself but I only got TTF files.

Answer 1

What we typically do with fonts on the Polymer team is to create an HTML import that loads the font(s), and include that import as a dependency in your element's import. This puts the font definitions in the main document (so they can be used by any components) but also guarantees that the fonts will be available in your element's shadow dom.

Here's a quick example: http://jsbin.com/cefawali/1/edit

We do this with the RobotoDraft font. Here's the import: https://github.com/Polymer/font-roboto/blob/master/roboto.html

The other approach is to use no-shim and use @import:

<polymer-element>
<template>
 <style no-shim>
    @import url('http://fonts.googleapis.com/css?family=Maven+Pro:400,700');
 </style>
...

Note There's currently a bug preventing this latter approach from working.