trouble with font-face in meteor based on Discover Meteor microscope app

Posted by charliemagee on Stack Overflow See other posts from Stack Overflow or by charliemagee
Published on 2014-06-04T23:42:43Z Indexed on 2014/06/05 3:26 UTC
Read the original article Hit count: 445

Filed under:
|

I've gone through the Discover Meteor book and successfully created Microscope. Now I'm trying to build my own app based on what I've learned. I want to use @font-face for fonts and icon fonts. I can't get them to show up.

Here's my directory structure: client/stylesheets

I've got my fonts in the stylesheets folder. I'm using scss, by the way, and that's working fine with the scss package. Here's how I'm calling the fonts in the stylesheet:

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

I've tried '/stylesheets/Amaranth etc. and all other combinations that I can think of and nothing is working. I've tried putting them in public. Nothing.

I know files like this are supposed to go in public folder but that seems to kill the stylesheets entirely. I'm not sure why the Microscope directory design would cause that to happen.

These question/answers didn't help: using font-face in meteor? Icon font from fontello not working with Meteor js

Thanks for any help.

© Stack Overflow or respective owner

Related posts about meteor

Related posts about font-face