Next.js Discord

Discord Forum

Dynamically load fonts

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hello, im trying to dynamically load Fonts for a page.
Its basiaclly a SaaS which gives the user to change the layout.
I load the client specification from S3 which includes how stuff should be styled.
but my issue is some have custom fonts while others have fonts avaialbe trought googles fonts api.

since in NextJS 14 i cannot use <link rel='stylesheets' ... /> to dynamically load a CSS file with fonts specified trough classes. is there another way to resolve this?
Answered by B33fb0n3
you can dynamically load them via javascript inside a client component like this:
const fontElement = document.createElement('link');
fontElement.rel = 'stylesheet';
fontElement.href = `https://fonts.googleapis.com/css?family=${fontFamily}:${fontVariant}`;
document.head.appendChild(fontElement);

You said you have google fonts and local fonts. If there is a local font, just repalce the href with the path to your local font and it should work perfectly
View full answer

9 Replies

@Cape lion Hello, im trying to dynamically load Fonts for a page. Its basiaclly a SaaS which gives the user to change the layout. I load the client specification from S3 which includes how stuff should be styled. but my issue is some have custom fonts while others have fonts avaialbe trought googles fonts api. since in NextJS 14 i cannot use <link rel='stylesheets' ... /> to dynamically load a CSS file with fonts specified trough classes. is there another way to resolve this?
B33fb0n3
you can dynamically load them via javascript inside a client component like this:
const fontElement = document.createElement('link');
fontElement.rel = 'stylesheet';
fontElement.href = `https://fonts.googleapis.com/css?family=${fontFamily}:${fontVariant}`;
document.head.appendChild(fontElement);

You said you have google fonts and local fonts. If there is a local font, just repalce the href with the path to your local font and it should work perfectly
Answer
@Cape lion can i use that to load a css stylesheet from my S3 buckets?
B33fb0n3
yes, just change the url of the href to the path to your local font
Cape lionOP
then something like this should be auto applied correct?
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@layer base {
@font-face {
font-family: "SDemiBold";
src: url("https://s3.eu-north-1.amazonaws.com/test/SText-DemiBold.otf")
format("opentype");
}
@font-face {
font-family: "SRegular";
src: url("https://s3.eu-north-1.amazonaws.com/test/SText-Regular.otf")
format("opentype");
}
}
body {
font-family: "SRegular",sans-serif;
}

.demiFont {
font-family: "SDemiBold",sans-serif;
}
.robot {
font-family: "Roboto",sans-serif;
}
Cape lionOP
im sorry could you elaborate more, im don't understand what ur trying to say by u can use ur local font only whats inside local font when loaded?

u mean local font the nextjs function?
@Cape lion im sorry could you elaborate more, im don't understand what ur trying to say by u can use ur local font only whats inside local font when loaded? u mean local font the nextjs function?
B33fb0n3
no, you would first load the font and depending on your backend you normally get something like this back:
@font-face {
  font-family: "Loboster";
  src: url("https://.../fonts/Loboster.ttf") format("truetype");
}

When it's not returned like that, you can still load it from the server and add it as stylesheet and create the @font-face on your own. You have the url and you should know the name
B33fb0n3
@Cape lion solved?
@B33fb0n3 <@187654139159904256> solved?
Cape lionOP
didnt get a chance to try it out. but i think i get it so should be fine. thank you