S
SolidJSā€¢12mo ago
Empress

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

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: "Encode-Sans-Semi-Expanded";
src: url("/fonts/Encode_Sans_Semi_Expanded/");
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: "Encode-Sans-Semi-Expanded";
src: url("/fonts/Encode_Sans_Semi_Expanded/");
}
my entry-client.tsx
import 'public/fonts/Encode_Sans_Semi_Expanded/'
import 'public/fonts/Encode_Sans_Semi_Expanded/'
No description
17 Replies
Jasi
Jasiā€¢12mo ago
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:
@font-face {
font-family: 'Mulish';
src: url('./assets/fonts/Mulish-VariableFont_wght.ttf');
font-display: swap;
}
@font-face {
font-family: 'Mulish';
src: url('./assets/fonts/Mulish-VariableFont_wght.ttf');
font-display: swap;
}
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-font
Empress
Empressā€¢12mo ago
Thanks 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'.
Jasi
Jasiā€¢12mo ago
yes as far as I know you need to import every file/weight seperatly that's why there is a font-weight property:
@font-face {
font-family: "Open Sans";
src:
local("Open Sans") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
font-weight: 400;
}
@font-face {
font-family: "Open Sans";
src:
local("Open Sans") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
font-weight: 400;
}
my font is a variable font, that's why I don't specify it :)
oneiro
oneiroā€¢12mo ago
@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?
Jasi
Jasiā€¢12mo ago
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
Jasi
Jasiā€¢12mo ago
if you have a look at the dist folder it generates, this starts to make sense :)
No description
oneiro
oneiroā€¢12mo ago
Yeah, I just saw that - however apparently these fonts can then not be resolved correctly, because my browser throws an error weird
Jasi
Jasiā€¢12mo ago
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
oneiro
oneiroā€¢12mo ago
I am importing these inside a root.css file which itself is imported inside my root.tsx
Jasi
Jasiā€¢12mo ago
hm can you show the file? this should work
oneiro
oneiroā€¢12mo ago
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
html {
font-family: Encode-Sans-Semi-Expanded, sans-serif;
}

@font-face {
font-family: "Encode-Sans-Semi-Expanded";
src: url("./assets/fonts/Encode_Sans_Semi_Expanded/EncodeSansSemiExpanded-Regular.ttf");
font-weight: 400;
}

@font-face {
font-family: "Encode-Sans-Semi-Expanded";
src: url("./assets/fonts/Encode_Sans_Semi_Expanded/EncodeSansSemiExpanded-Semibold.ttf");
font-weight: 600;
}

@font-face {
font-family: "Encode-Sans-Semi-Expanded";
src: url("./assets/fonts/Encode_Sans_Semi_Expanded/EncodeSansSemiExpanded-Bold.ttf");
font-weight: 700;
}
....}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
html {
font-family: Encode-Sans-Semi-Expanded, sans-serif;
}

@font-face {
font-family: "Encode-Sans-Semi-Expanded";
src: url("./assets/fonts/Encode_Sans_Semi_Expanded/EncodeSansSemiExpanded-Regular.ttf");
font-weight: 400;
}

@font-face {
font-family: "Encode-Sans-Semi-Expanded";
src: url("./assets/fonts/Encode_Sans_Semi_Expanded/EncodeSansSemiExpanded-Semibold.ttf");
font-weight: 600;
}

@font-face {
font-family: "Encode-Sans-Semi-Expanded";
src: url("./assets/fonts/Encode_Sans_Semi_Expanded/EncodeSansSemiExpanded-Bold.ttf");
font-weight: 700;
}
....}
(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
Jasi
Jasiā€¢12mo ago
I'm doing the exact same. How do you build & run prod?
oneiro
oneiroā€¢12mo ago
I run solid-start build and afterwards pm2-runtime ecosystem.config.cjs (which uses dist/server.js from the build as entrypoint)
Jasi
Jasiā€¢12mo ago
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)
oneiro
oneiroā€¢12mo ago
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 šŸ˜¬
Jasi
Jasiā€¢12mo ago
ohh wow that's unfortunate šŸ™ˆ glad it works now!
oneiro
oneiroā€¢12mo ago
Yeah, me too šŸ˜„ - thanks again for helping out!