1

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.

Community
  • 1
  • 1
charliemagee
  • 683
  • 5
  • 19

1 Answers1

2

Put the fonts in /public

Anything put here won't be translated by meteor into anything else. /public is the root of your site, so if you need to reference anything in /public then you don't need to do /public/whatever/blah its just /whatever/blah.

Also /public lives in the root of your app, not under /client or /server but at the root level along with /client and /server.

Hubert OG
  • 19,314
  • 7
  • 45
  • 73
Keith Nicholas
  • 43,549
  • 15
  • 93
  • 156
  • The situation is that the Discover Meteor project puts stylesheets in a different directory than /public. I kept trying to keep the font files in the same directory as the css and nothing was working. So I put ONLY the font files in public, fixed the url in the stylesheet and everything worked. Thanks for the help! – charliemagee Jun 05 '14 at 16:54
  • Having the `@font-face` rules in a partial Sass file or a Sass file did not work for me. I had to put the rules in a css files inside `/public/fonts` and link them in a `link` tag in a file named `/client/main_head.html` ; that file only has a `head` tag and the `link` tag inside (Meteor loads file with `head` in the name first). – Sumi Straessle Feb 20 '17 at 23:24