[Solved] Importing fonts with Stylus

help
1

Hello, I was wondering if anyone here has any experience working with a Meteor React Stylus environment? I have a styles.styl file in my root directory, and I’m importing some fonts from a subfolder. This is my code in my styles.styl file, but for some reason this does not work at all in any browser.

@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)

Would anyone be able to shed some light on how I should get fonts being imported properly? I don’t receive any errors, but this font family is not instantiated when used on any element.

2

Hi @ajaypillay, welcome to the forums!

Try moving your font files into public and changing the stylus urls to point there.
For example:
/public/fonts/FuturaExtraBold.woff = url(fonts/FuturaExtraBold.woff)

1 Like
3

Hello, so when I was experimenting with this previously, I am not sure why it didn’t load properly. It must have been due to some caching in my browser which caused the font to not update despite placing it in the public/ folder. I tried the exact same and it worked, so I can pinpoint exactly why it didn’t work the first time I tried it. But yes, this is the solution. Thanks.

1 Like