Importing Font From Another Server?
Unanswered
Palomino posted this in #help-forum
PalominoOP
Is there a way I can import fonts hosted on another server and assign them to font variables that are used by tailwind?
For example, this is how I'm using the fonts in the next application.
But what I would like to do is change the path to be on another server, like so. Is this even possible?
For example, this is how I'm using the fonts in the next application.
import localFont form "next/font/local";
import { cn } from "@/lib/utils";
const helveticaNeue = localFont({
src: [
{
path: "../../assets/fonts/HelveticaNeue-Thin.woff2",
weight: "100",
},
],
variable: "--helvetica-neue",
});
const fontVariables = cn(
`${helveticaNeue.variable}`
);
export { fontVariables };But what I would like to do is change the path to be on another server, like so. Is this even possible?
path: "https://www.site.com/fonts/HelveticaNeue-Thin.woff2"3 Replies
@Palomino Is there a way I can import fonts hosted on another server and assign them to font variables that are used by tailwind?
For example, this is how I'm using the fonts in the next application.
js
import localFont form "next/font/local";
import { cn } from "@/lib/utils";
const helveticaNeue = localFont({
src: [
{
path: "../../assets/fonts/HelveticaNeue-Thin.woff2",
weight: "100",
},
],
variable: "--helvetica-neue",
});
const fontVariables = cn(
`${helveticaNeue.variable}`
);
export { fontVariables };
But what I would like to do is change the path to be on another server, like so. Is this even possible?
js
path: "https://www.site.com/fonts/HelveticaNeue-Thin.woff2"
Unfortunately it’s not possible, as far as I know. I have to make a script like this https://github.com/joulev/website/blob/main/scripts/download-fonts.sh and run it before build to download the font locally and then use that font with next/font/local
@joulev Unfortunately it’s not possible, as far as I know. I have to make a script like this https://github.com/joulev/website/blob/main/scripts/download-fonts.sh and run it before build to download the font locally and then use that font with next/font/local
PalominoOP
Ah I see. So no matter what the font needs to be stored locally with the nextjs app?
Yeah