Search code examples
cssreactjsmeteorfontsstylus

Importing fonts with Stylus in a Meteor-React-Apollo-Graphql Stack

I have a styles.styl file in my Meteor root directory which I am able to load perfectly fine. However, when I attempt to import custom fonts, none of it loads up in any browser I load the page in.

@font-face
    font-family Futura
    font-style Extra Bold
    src url(imports/ui/assets/fonts/Futura/FuturaExtraBold.otf) format(opentype),
    url(imports/ui/assets/fonts/Futura/FuturaExtraBold.ttf) format(truetype),
    url(imports/ui/assets/fonts/Futura/FuturaExtraBold.eot) format(embedded-opentype),
    url(imports/ui/assets/fonts/Futura/FuturaExtraBold.woff) format(woff),
    url(imports/ui/assets/fonts/Futura/FuturaExtraBold.svg) format(svg)

Note that the imports are relative to the styles.styl file. I suspect it's a pathing issue which is causing this, but everything I've tried has not been able to fix this.

  • Placing my fonts in the public/ folder
  • Using mys:fonts to remap the path of the fonts. Once I do this, when I type <ip address>:3000/fonts/Futura/FuturaExtraBold.ttf in the URL bar, I am able to download the file. However, the resource is still not loaded for use within my site.
  • Moving the Fonts folder around into the root directory, client, and other subdirectories, all to no avail (while of course updating the path in styles.styl.

Any help is appreciated.

Thanks.

UPDATE: I used the mys:fonts package to remap my font filepaths, and then I remapped my filepaths, so now http://<ipaddress>:3000/fonts/Futura/FuturaExtraBold.ttf and so on are links I can go to and it downloads the font. But for some reason the .otf, .ttf and .woff threw this error in my console:

Failed to decode downloaded font: http://<ipaddress>:3000/fonts/Futura/FuturaExtraBold.woff (index):1 OTS parsing error: invalid version tag

But when I travel to http://<ipaddress>:3000/fonts/Futura/FuturaExtraBold.woff my site shows up exactly as per normal with the Futura font loaded and interpreted. This is clearly not the intended outcome but I am really not sure how to fix this.

Solution

  • So after I was playing around, I managed to get it working by placing my fonts in the public/ folder located in the root directory of my build. I did try this before, and it was not working as intended and as such I'm not sure why it appears to be working now. Perhaps it might've been a lack of enough testing on my part when I did place it in the public folder (loading in an isolated environment without any caching).

    Regardless, this now works.

    My fonts are located in public/ in a folder called fonts/, and imported into my styles.styl file with the filepath url(fonts/font.woff).