Vite issue with using local/custom fonts
I'm trying to load a custom font:
@font-face {
font-family: "Bellafair-Regular";
src: local("@/assets/fonts/Bellefair-Regular.ttf") format("truetype");
// src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');
}
getting this error with vite:
Error: Dynamic require of "path" is not supported
My vite config file:
const path = require("path");
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react(), dynamicImport(/* options */)],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
How to fix?5 Replies
Try to import path using the same syntax
import path from 'path'require is a commonjs method which only works in node. You're running this code on a browser where we use modern esmodules which use the import syntax
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
src: local() doesn't "load" a font file.
It's only a name reference to what a font is called if it's already installed on the device to prevent downloading the web font(s).
local('Arial') uses this installed font name
url("helvetica-neue.woff2") loads that WOFF2 font file if a font called "Arial" is not installed on the system.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#specifying_local_font_alternatives@font-face - CSS: Cascading Style Sheets | MDN
The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
Vite will copy your static
assets into the public or build folder respectively.
For the font-face url() use that path to refer to the font file
url("/styles/fonts/OpenSans-Bold.ttf")
Don't use aliases for these static assets (font, video, audio, images) but the URL they'd have in the web-root.