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/");
}

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

import 'public/fonts/Encode_Sans_Semi_Expanded/'

import 'public/fonts/Encode_Sans_Semi_Expanded/'

How to properly import fonts (with Tailwind)

Similar Threads

Similar Threads

Similar Threads