CODEWITHSUNDEEP
meteorfont-face
charliemagee
charliemagee

Reputation: 693

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

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.

Upvotes: 1

Views: 1005

Answers (1)

Keith Nicholas
Keith Nicholas

Reputation: 44316

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.

Upvotes: 2

Related Questions