search

DiscoverMeteor / Microscope

The Discover Meteor book's example app.
MIT License
885 stars 513 forks source link

stylesheets and fonts #113

Closed charliemagee closed 10 years ago

charliemagee commented 10 years ago

I've gone through the 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.

Going crazy here, so any help is much appreciated.

charliemagee commented 10 years ago

I'll answer my own question. My mistake was to try to keep the font files in the same directory as the css files. Once I put the font files in /public, but left the css in /client/stylesheets and added the / to the url of the font, everything worked.