How to load custom fonts in fullstack?

[pine sparrow]

i added some fonts to my public/fonts/* folder, but chrome says i get a 406 response from the dioxus server when trying to load them.

is there a dioxus setting i need to change?

the favicon i linked with document::Link { rel: "icon", href: asset!("/public/favicon.ico") } works, so I know that the public folder should be accessible , but all my fonts in public/fonts/* cant be accessed

what I did:

1. add the woff2 fonts to the public/fonts folder
2. add

@font-face {
  font-family: "MyCustomFont";
  src: url("/fonts/MyCustomFont-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

entries for each of my fonts to the tailwind input.css
3. extend tailwind font to make this font the new global font

extend: {
      fontFamily: {
        'sans': ["MyCustomFont", ...defaultTheme.fontFamily.sans],
      },
    },

this results in the chrome network -> fonts inspector to register 406's for MyCustomFont

[pine sparrow]

@nocturne viper any ideas?

[nocturne viper]

If public is your asset directory in your dioxus.toml, you don't include the folder name in the paths to the assets

The contents, not the folder, are copied into the bundle

/MyCustomFont-Bold.woff2

[pine sparrow]

hmm thats not the current behaviour for me. for example even the tailwind.css, if i change from

document::Link { rel: "stylesheet", href: asset!("/public/tailwind.css") }

to document::Link { rel: "stylesheet", href: asset!("/tailwind.css") }

i get the error:

Asset at /XXXX/my-app  --> XXXX/my-app/src/main.rs:53:49or directory (os error 2)                      
   |                                                                                       
53 |             document::Link { rel: "icon", href: asset!("/favicon.ico") }

and in Dioxus.toml

[application]

# dioxus project name
name = "my-app"

# default platform
# you can also use `dx serve/build --platform XXX` to use other platform
# value: web | desktop
default_platform = "web"

# Web `build` & `serve` dist path
out_dir = "dist"

# resource (static) file folder
asset_dir = "public"

# hot reload by default
hot_reload = true

and actual filesystem path of file: my-app/public/tailwind.css
Image

[nocturne viper]

assets inside of the asset macro are always relative to the local current project path

Assets outside of the asset macro are relative to the bundled path of assets which varies based on the platform. In the web renderer, the contents of your asset directory are copied into the bundle

Try looking into the bundle inside /target/dx/... to see what files are being served

[pine sparrow]

but tools/my-app/target/dx/my-app/debug/web/public/assets does not contain the fonts folder, it only contains my favicon and tailwind.css 🤔

[nocturne viper]

I think assets are the assets copied from manganis

Look in just public

[pine sparrow]

only wasm and index.html

[nocturne viper]

Are you using diouxs 0.6.0-alpha.5?

[pine sparrow]

yes

cli also

[nocturne viper]

It is inside of src?

Hmm, I'm not sure what is going wrong then

Some parts of the asset system have been fixed in the git version

[pine sparrow]

i am inside a cargo workspace, if that changes anything

[nocturne viper]

Should be fine as long as the dioxus.toml settings are being applied

(you can check based on the page title)

[pine sparrow]

also, i created the dioxus.toml with dx config init project-name just now, everything else (not fonts obv) was working without the dioxus.toml before

[nocturne viper]

I think the dioxus.toml needs to be in the crate (not the workspace) level

[pine sparrow]

yup: /my-app/Dioxus.toml

[nocturne viper]

Hmm, copying nested assets is working for me

I'm not in a workspace

[pine sparrow]

just checked and i can change the page title using dioxus.toml

ill dx clean and try again

[nocturne viper]

Oh, wait that is getting copied into /public/assets/fonts

[pine sparrow]

oh the target folder i showed you was not the good target folder (since i am in a workspace, the one i showed you was the internal one that was probably built before it was a workspace)

[nocturne viper]

Does this work?

@font-face {
  font-family: "MyCustomFont";
  src: url("/assets/fonts/MyCustomFont-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

I don't think we should be adding the assets prefix

but it looks like it did for me when running dx serve

[pine sparrow]

ill change the paths