{"id":1726,"date":"2022-08-30T15:18:56","date_gmt":"2022-08-30T15:18:56","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/29\/load-external-google-fonts-stylesheet-with-yepnope-modernizr-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:18:56","modified_gmt":"2022-08-30T15:18:56","slug":"load-external-google-fonts-stylesheet-with-yepnope-modernizr-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/load-external-google-fonts-stylesheet-with-yepnope-modernizr-collection-of-common-programming-errors\/","title":{"rendered":"Load external Google Fonts stylesheet with YepNope\/Modernizr-Collection of common programming errors"},"content":{"rendered":"

I’m trying to load a dynamically generated Google Font stylesheet using Modernizr (YepNope) but always get this error:<\/p>\n

\n

Uncaught SyntaxError: Unexpected token ILLEGAL (css:1)<\/p>\n<\/blockquote>\n

My stylesheet looks like this:<\/p>\n

http:\/\/fonts.googleapis.com\/css?family=Holtwood+One+SC\n<\/code><\/pre>\n
and I’m calling it via<\/p>\n
Modernizr.load({\n    load: ['css!http:\/\/fonts.googleapis.com\/cssfamily=Holtwood+One+SC|Terminal+Dosis:700'],\n    callback: \n        function (url, result, key) {\n            console.log('loaded...!');          \n        }       \n});\n<\/code><\/pre>\n
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 =(<\/p>\n
\n
“With the css! prefix, you can prepend it to any file name and yepnope will treat it like a css file.”<\/p>\n<\/blockquote>\n
Anyone had success achieving something similar? Thanks!<\/p>\n
    \n
  1. \n
    Or, you can call Google Webfont API, such as:<\/p>\n
    Modernizr.load({\n load: 'http:\/\/ajax.googleapis.com\/ajax\/libs\/webfont\/1\/webfont.js',\n complete: function () {\n\n  WebFont.load({\n   google: {\n    families: ['Open+Sans:300,400,700']\n   }\n  });\n }\n});\n<\/code><\/pre>\n
    Ideally should also have use a no-js fallback to load the fonts from your server using a timed function or another, like:<\/p>\n
    if (!window.jQuery) {\n Modernizr.load('http:\/\/d.clickmetrics.cl\/assets\/js\/scaffolding\/jquery-1.9.0.min.js');\n}\n<\/code><\/pre>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-29 06:18:08. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1726","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1726"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1726\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}