Search code examples
node.jsfont-facepugstylus

in jade, cannot get style @font-face to work

from a working css file (generated by font-squirrel):

@font-face {
  font-family: 'SnowTopCaps'; 
  src: url('/fonts/snowtopcaps-webfont.eot'); 
  src: url('/fonts/snowtopcaps-webfont.eot?#iefix') format('embedded-opentype'),
    url('/fonts/snowtopcaps-webfont.woff') format('woff'),
    url('/fonts/snowtopcaps-webfont.ttf') format('truetype'),
    url('/fonts/snowtopcaps-webfont.svg#snowtopcaps') format('svg');
  font-weight: normal;
  font-style: normal;
}

trying to declare in style section in jade document:

...
style
  @font-face
    font-family
      | SnowTopCaps
    src
      | url('/fonts/snowtopcaps-webfont.woff') format('woff')
    font-weight
      | normal
    font-style
      | normal
    ...

but none of the style declaration is written to the generated html?

any anybody see what's missing here?

Solution

  • This syntax is for HTML, not for css. Use

    style.
  @font-face {
    font-family: 'SnowTopCaps'; 
    src: url('/fonts/snowtopcaps-webfont.eot'); 
    src: url('/fonts/snowtopcaps-webfont.eot?#iefix') format('embedded-opentype'),
      url('/fonts/snowtopcaps-webfont.woff') format('woff'),
      url('/fonts/snowtopcaps-webfont.ttf') format('truetype'),
      url('/fonts/snowtopcaps-webfont.svg#snowtopcaps') format('svg');
    font-weight: normal;
    font-style: normal;
  }

    Or use the :stylus filter