1

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?

cc young
  • 18,939
  • 31
  • 90
  • 148

1 Answers1

2

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

Ven
  • 19,015
  • 2
  • 41
  • 61
  • thanks! - I had completely spaced out the `stylus:` filter. it simply replaces `style` and everything works great – cc young Mar 23 '13 at 05:02
  • I don't know if this did at the time of writing, but now requires a `.` after `style`. See https://stackoverflow.com/questions/21765107/how-to-use-the-style-tag-with-jade-templates#answer-21777868 for more information – mantagen Jul 24 '18 at 17:10
  • @mantagen It didn't, [`script` and `style` were special cased](https://github.com/pugjs/pug/issues/878). Edited anyway. – Ven Jul 26 '18 at 09:37