https://github.com/rushmi0/dioxus-basic
#Why is the font I configured not displaying?
plucky kayak
plucky kayak
#![allow(non_snake_case)]
use dioxus::prelude::*;
use crate::pages::HomePage;
const _TAILWIND_URL: &str = manganis::mg!(file("public/tailwind.css"));
const STYLE: &str = manganis::mg!(file("src/styles/main.css"));
#[component]
pub fn App() -> Element {
rsx! {
link { rel: "stylesheet", href: STYLE }
HomePage {}
}
}
body {
background-color: #F4F4F4;
font-family: "JetBrainsMono";
overflow-x: hidden;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "JetBrainsMono";
src: local("JetBrainsMonoNL-Regular"),
url("./src/assets/fonts/JetBrainsMonoNL-Regular.ttf") format("ttf");
}
chrome burrow
Huh it looks like your asset dir is set to public but I don't see that folder in your repo https://github.com/rushmi0/dioxus-basic/blob/69152f46d9e1e2e9d9ba52835798b64a392c1a7a/Dioxus.toml#L14
Your assets in src/assets could go under public as well, then dx serve will serve your assets alongside your app
Then you can change your CSS to something like:
@font-face {
font-family: "JetBrainsMono";
src: local("JetBrainsMonoNL-Regular"),
url("/public/fonts/JetBrainsMonoNL-Regular.ttf") format("ttf");
}
You can find more info on https://dioxuslabs.com/learn/0.5/reference/assets
