Search code examples
javascripthtmlmeteorassetstelescope

Linking to assets in the public folder in Meteor.js and Telescope

I am using Telescope on Meteor and I am having trouble accessing anything that's in my public folder. In my Meteor app I have a package that has a public folder - that has images/fonts that I am failing to link to properly.

I am new to Meteor and Telescope so I think I am messing up something basic. These is what I am working with:

File structure path to /public:

MyApp/Packages/ThemeName/public/

Which contains three folders: icons, images, and fonts.

To link to my fonts in my CSS, I am using @font-face:

@font-face {
    font-family: Neuzeit; 
    src:
    url("/fonts/neuzeit-book.css"),
    url("/fonts/neuzeit-book.eot"),
    url("/fonts/neuzeit-book.svg"),
    url("/fonts/neuzeit-book.ttf"),
    url("/fonts/neuzeit-book.woff");
}
body {
    font-family: Neuzeit;
}

But these fonts don't load and I receive an error in my console: Failed to decode downloaded font: http://localhost:3000/fonts/neuzeit-book.ttf [index:1]. I get this for each of those sources. Additionally, I have also attempted to link to images in my templates within the same package:

<img src="/icons/icon-close.png" />

But then I get a broken link icon instead of that image on the page - and oddly, no 404 for the image in the console.

Is this a permissions issue? I have referred to this SO article but this ended up being irrelevant as I believe I'm writing the correct paths right? Please advise!

Solution

  • /public needs to be at the root of your app, not under /Packages/ThemeName/public/