Google Fonts APIs and Polymers: CORS Issues

Question

I recently played with Polymer , and finally, I think I have a head around the border of the shadow, at least to the point where I know where I need to include link tags to make my CSS work.

It's fine and dandy, but I can't use Google fonts. If I use @import inside my stylesheet, then as soon as this stylesheet is included in the Polymer user 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 

XMLHttpRequest is present here, perhaps because of the way Polymer retrieves resources and custom elements in the first place, which I suppose is an axion of the header mentioned in the error message.

However, if I use only the link method

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

This does not cross the shadow border, and I still do not get my fonts.

Am I missing something obvious? How to get Google fonts in shadow DOM? I tried to download the zip file from Google Fonts themselves, but I only got the TTF files.

Answer 1

What we usually do with fonts in the Polymer team is to create an HTML import that loads the font (s) and includes this import as a dependency when importing an element. This puts the font definitions in the main document (so they can be used by any components), but also ensures that the fonts are available in your shadow element house.

Here is 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

Another approach is using no-shim and using @import :

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

Note There is currently an error that prevents this latter approach from working.