Geek Answers Handbook

Google web fonts not working in Express

I'm having trouble working Google websites in express 3.0.

Font loading in the standard way does not 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);
+4
source share
1 answer

I had similar problems with Express 3.0.0rc2, not including CSS. I'm not sure if this is a Jade or Express issue, but when I add a working style.css , it works just like this:

 link(rel='stylesheet', href='/stylesheets/style.css')

However, if I delete this line and insert, say, Twitter Bootstrap css files, I get strange HTML output.

 link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')

This 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 don’t know. :-) I assume that this has something to do with parsing and HTML output.

+2
source

More articles:


All Articles