SolidJS•14mo ago

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/'

17 Replies

Jasi•14mo 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•14mo 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•14mo 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•13mo 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•13mo 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•13mo ago

if you have a look at the dist folder it generates, this starts to make sense :)

oneiro•13mo ago

Yeah, I just saw that - however apparently these fonts can then not be resolved correctly, because my browser throws an error weird

Jasi•13mo 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•13mo ago

I am importing these inside a root.css file which itself is imported inside my root.tsx

Jasi•13mo ago

hm can you show the file? this should work

oneiro•13mo 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•13mo ago

I'm doing the exact same. How do you build & run prod?

oneiro•13mo ago

I run solid-start build and afterwards pm2-runtime ecosystem.config.cjs (which uses dist/server.js from the build as entrypoint)

Jasi•13mo 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•13mo 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 😬

Gaming

Programming

How to properly import fonts (with Tailwind)