11

I am trying to use CSS @font-face in meteor, but for some reason it isn't working:

@font-face {
    font-family: printFailed; 
    src:
    url("../public/fonts/wlm_print_failed.ttf"),
    url("../public/fonts/wlm_print_failed.eot");
}

I've checked my paths and spelling.

When I inspect the element in the browser it appears that the filepaths and names are correct, but that the browser is substituting a generic font instead of the intended custom font.

Any pointers? Thanks.

songololo
  • 4,724
  • 5
  • 35
  • 49

1 Answers1

30

Just use / as everything in public becomes the root directory from the point of view of the web browser:

@font-face {
    font-family: printFailed; 
    src:
    url("/fonts/wlm_print_failed.ttf"),
    url("/fonts/wlm_print_failed.eot");
}
Tarang
  • 75,157
  • 39
  • 215
  • 276
  • Thanks, I could have sworn I tried this yesterday and it didn't work...but tried it now per your code snippet and it works great. Thanks. – songololo Jun 08 '13 at 16:48
  • this works locally on Meteor, but fails on Galaxy deployment. Actually, it works on Galaxy from a desktop/laptop browser, but not on Galaxy from mobile. Weird huh – Jan Jul 29 '16 at 15:53
  • 2
    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:25
  • @SumiStraessle is right about partial sass files and hix fix saved my day. Thanks mate. – Billybobbonnet May 13 '18 at 09:29
  • Dynamic imports may also cause [issues](https://github.com/meteor/meteor/issues/10247) since it removes the leading '/'. Current recommendation at time of writing is to move any CSS files that use the url function out of your app's `imports` directory. (`` also seems to work but risk of it causing other inadvertent issues seems high.) – alanning Jan 29 '21 at 15:39