I'm having trouble getting Google webfonts to work in express 3.0.
Loading the font in the standard way doesn't seem to work:
link(href='http://fonts.googleapis.com/css?family=Crete+Round')
however loading the font in one of these ways works fine:
script(type="text/javascript")
WebFontConfig = {google: { families: [ 'Crete+Round::latin' ] }};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
or
style
@import url(http://fonts.googleapis.com/css?family=Crete+Round);
I've had similar issues with Express 3.0.0rc2 not including CSS. I'm not sure if this is a Jade or an Express issue, but when I add a working style.css
it works just fine like so:
link(rel='stylesheet', href='/stylesheets/style.css')
Yet, if I remove that line and insert, say Twitter Bootstrap css files, I get weird HTML output.
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
It only works if I have something like this:
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
Why? I know not. :-) I assume it's something to do with the parsing and HTML output.