Leptos + Tailwind + Custom fonts

[bryanmaina]

I am trying to use custom fonts with the Leptos template.

I have added the following options in the cargo.toml

# The tailwind input file.
#
# Optional, Activates the tailwind build
tailwind-input-file = "styles/tailwind.css"

# The tailwind config file.
#
# Optional, defaults to "tailwind.config.js" which if is not present
# is generated for you
tailwind-config-file = "tailwind.config.js"

All the files present in the "asset" folder are served correctly:

Some of those files are fonts and I can download them like this(notice there is no "pkg" part in the url): http://localhost:8787/fonts/CooperHewitt-Bold.woff

I am trying to use one of the font like this in my css (this is my tailwind.css file):

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

@layer base {
  @font-face {
    font-family: cooper hewitt;
    font-style: normal;
    font-weight: 700;
    src: local('Cooper Hewitt'), url(fonts/CooperHewitt-Bold.woff) format('woff')
  }
}

and this fails because it calls /pkg

I am pretty sure that the css function url() will always add the /pkg part.

My guess is someone here has already figured out how to deal with this problem.

Update/ maybe a solution ()?():

Found no information to confirm it but it seels that the css function url() looks for content in the same folder as the css file.
That is why url(.../fonts/CooperHewitt-Bold.woff) instead of url(fonts/CooperHewitt-Bold.woff) works. I am not sure this will work once deployed as a worker but it surely works on local.

public folder:

public/pkg folder:

[juhinagpure]

The issue you're facing is that the url() in your Tailwind CSS file is resolving relative to the location of the CSS file, which includes the /pkg part.

1. Instead of using url(fonts/CooperHewitt-Bold.woff), use /fonts/CooperHewitt-Bold.woff.
2. This way, it looks directly in the root /fonts directory, bypassing the /pkg folder

@font-face {
font-family: 'Cooper Hewitt';
font-style: normal;
font-weight: 700;
src: local('Cooper Hewitt'), url('/fonts/CooperHewitt-Bold.woff') format('woff');
}

[bryanmaina]

Thank you for your response! This does indeed solve my issue and lack of understand of the CSS function url().