How to properly import fonts (with Tailwind)
Iām using SolidStart + Tailwind for a project, and i can not import my font.
I tried both importing it from the /public/ directory and using @fontsource (aka as a node module).
If I put the import statement in my root.tsx, I dont get any error and it simply uses the fallback font.
If I try putting the import in my entry-client.tsx I get a file not found error ( see attached screenshot).
my root.css
my entry-client.tsx
![No description](https://cdn.answeroverflow.com/1138785283274444840/Screenshot_2023-08-09_at_12.41.48.png)
17 Replies
you don't have to serve the fonts in the public directory. Having them in the source dir allows for better caching: https://start.solidjs.com/core-concepts/static-assets#when-to-use-the-public-directory-versus-imports
I import the font in my css file like this:
And the font is under
src/assets/fonts/Mulish-VariableFont_wght.ttf
the css file is under src/root.css
which means that you have to use relative paths :) For files in the public dir, I think you have to use an absolute path like /fonts/xxx
where the fonts folder is directly under public/
the static assets documentation should explain it all and give additional information: https://start.solidjs.com/core-concepts/static-assets
oh I forgot, you can configure the font to be default in the tailwind config, which is what I did.
https://tailwindcss.com/docs/font-family#customizing-the-default-fontThanks for the reply!
I had already found the information from the two links you provided.
However you still helped me. Apparently importing a single .ttf file (for a single font weight) works just as intended. Importing a folder of files for multiple font weights, as i tried, does not tho.
I'm still unsure if this is the intended behaviour, as the workaround of importing them one at at time kinda dismantles the idea of importing a 'font family'.
yes as far as I know you need to import every file/weight seperatly
that's why there is a font-weight property:
my font is a variable font, that's why I don't specify it :)
@Empress actually I think it might make sense to explicitely import parts of the font family, as you typically won't use all available font weigths anyway. Therefore you specify which weights should be imported
@giyomoon actually I am having a weird issue with the font as well:
My fonts dir is located in
src/fonts
and I import them with url("./fonts/...")
.
This works well during development, however for some reason in production the browser tries to access the fonts via "<domain>/assets/fonts
instead of "<domain>/fonts"
>
Do you have any idea where the assets
part inside the resolved path is coming from?solid puts all assets it uses (fonts, js files etc.) into an assets folder and hosts it from there. It should work in prod ![thinkies](https://cdn.discordapp.com/emojis/1047508068440735856.png)
![thinkies](https://cdn.discordapp.com/emojis/1047508068440735856.png)
if you have a look at the dist folder it generates, this starts to make sense :)
![No description](https://cdn.answeroverflow.com/1141031906708816054/image.png)
Yeah, I just saw that - however apparently these fonts can then not be resolved correctly, because my browser throws an error
weird
where do you import it?
if you want to use the font somewhere outside of vite, you need to put it into the public folder so the filename doesn't get hashed
I am importing these inside a
root.css
file which itself is imported inside my root.tsx
hm can you show the file?
this should work
(i put assets in front of it, because I now moved the fonts into an asset dir)
so my fonts path is now
src/assets/fonts
I'm doing the exact same. How do you build & run prod?
I run
solid-start build
and afterwards pm2-runtime ecosystem.config.cjs
(which uses dist/server.js
from the build as entrypoint)can you look into the dist folder? is the font under ./dist/assets/***.ttf ?
and in the
,css
it generates which is called something like entry-client-***.css
, how does it import the font? (search for your font name)so for some reason only two of the fonts are inside the directory (probably because of tree-shaking and because the third fontweight isn't being used). However interestingly enough some fonts seem to be imported correctly and one fontweight doesn't.
This is probably the issue here: the fontweight is also never used (i guess) which is why it isn't bundled properly, but the import inside the css file remains, which leads to the error. I'll have to check something and make a deployment. I'll report back in a second š š (thanks for helping out btw!)
oh, no wait - actually we use this font-weight š¤
ugh - I think there is a typo one of the font-weights š
and it probably worked locally because of OSX's case-insensitive file system š¬