javascriptcssasynchronousmodernizryepnope

Load external Google Fonts stylesheet with YepNope/Modernizr

I'm trying to load a dynamically generated Google Font stylesheet using Modernizr (YepNope) but always get this error:

Uncaught SyntaxError: Unexpected token ILLEGAL (css:1)

My stylesheet looks like this:

http://fonts.googleapis.com/css?family=Holtwood+One+SC

and I'm calling it via

Modernizr.load({
    load: ['css!http://fonts.googleapis.com/cssfamily=Holtwood+One+SC|Terminal+Dosis:700'],
    callback: 
        function (url, result, key) {
            console.log('loaded...!');          
        }       
});

The website says this but for some reason it just won't work. I think the resource is parsed as a script file and that's what cause the error, but can't seem to make it work =(

"With the css! prefix, you can prepend it to any file name and yepnope will treat it like a css file."

Anyone had success achieving something similar? Thanks!

Solution

  • Make sure you are adding the css prefix file to your copy of yepnope. It works like a jQuery plugin.

    You can get it at:

    https://github.com/SlexAxton/yepnope.js/blob/master/prefixes/yepnope.css-prefix.js