S
SolidJS•4d ago
ⱼ ₒ ₑ

Solid Start Vinxi complaining about public and can't resolve public fonts

When I define my font faces and reference the actual font files like so: 
url("/fonts/open-sauce/OpenSauceOne-Black.woff")
url("/fonts/open-sauce/OpenSauceOne-Black.woff")
It does not complain but when building it will state it can't resolve it. If I do: 
url("/public/fonts/open-sauce/OpenSauceOne-Black.woff")
url("/public/fonts/open-sauce/OpenSauceOne-Black.woff")
It will resolve but complain endlessly when doing a dev server I used Astro with the root and had no issues What am I doing wrong?
5 Replies
peerreynders
peerreynders•2d ago
- Created and installed fresh SolidStart(TS) "basic" project. - moved src/app.css to src/styles/app.css - adjusted import './styles/app.css'; in src/app.tsx - copied Geist-SemiBold.woff2 into public/fonts - modified src/styles/app.css: 
/* file: src/styles/app.css */
/* added @font-face */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

a {
  margin-right: 1rem;
}

main {
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

h1 {
  /* added font-family */
  font-family: Geist;
  color: #335d92;
  text-transform: uppercase;
  font-size: 4rem;
  line-height: 1.1;
  margin: 4rem auto;
  max-width: 14rem;
}
/* … more css … */
/* file: src/styles/app.css */
/* added @font-face */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

a {
  margin-right: 1rem;
}

main {
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

h1 {
  /* added font-family */
  font-family: Geist;
  color: #335d92;
  text-transform: uppercase;
  font-size: 4rem;
  line-height: 1.1;
  margin: 4rem auto;
  max-width: 14rem;
}
/* … more css … */
- $ pnpm run dev and visit http://localhost:3000/. It works. - $ pnpm run build. You'll see a bunch of
/fonts/Geist-SemiBold.woff2 referenced in /fonts/Geist-SemiBold.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime
- $ node .output/server/index.mjs and visit http://localhost:3000/. It works.
ⱼ ₒ ₑ
ⱼ ₒ ₑOP•2d ago
/fonts/Geist-SemiBold.woff2 referenced in /fonts/Geist-SemiBold.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime yeah this is my issue does it not matter?
peerreynders
peerreynders•2d ago
Given that font files are not bundled, no. What's important is that they can be located at runtime. You can use preload to give the browser a hint that it will need the font files.
MDN Web Docs
rel=preload - HTML: HyperText Markup Language | MDN
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's...
peerreynders
peerreynders•2d ago
You can suppress the message with this app.config.ts: 
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        external: [
          '/fonts/Geist-SemiBold.woff2'
        ]
      }
    }
  }
});
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        external: [
          '/fonts/Geist-SemiBold.woff2'
        ]
      }
    }
  }
});
https://rollupjs.org/configuration-options/#external That way it will only complain about files you haven't added yet (warning you of potential misspellings).
Rollup
The JavaScript module bundler
ⱼ ₒ ₑ
ⱼ ₒ ₑOP•2d ago
Thank you I appreciate the clarifications and support

Did you find this page helpful?