Next.js Discord

Discord Forum

Next Font with External Fonts

Unanswered
Colombian fino hound posted this in #help-forum
Open in Discord
Colombian fino houndOP
Is there a way to use Next/Font with external font files? we are hosting all of our fonts on our own CDN to share them between projects, but want to leverage the functionality and benfits of Next/Font, but without hosting the fonts locally

17 Replies

American
next/font/local use fs to read the src path, so it's not possible
Colombian fino houndOP
@American do you have any idea if there is another package that can do this?
American
What specific benefits are you looking for?
Colombian fino houndOP
preloading the fonts only the pages we need
anything that helps with CLS
@Colombian fino hound anything that helps with CLS
best thing is just host the font locally. external fonts will naturally be worse as it involves an extra request.
Colombian fino houndOP
we have several apps all on subdomains, that users bounce between in our ecosystem, if we don't share fonts they are downloading the same fonts multiple times
@Colombian fino hound we have several apps all on subdomains, that users bounce between in our ecosystem, if we don't share fonts they are downloading the same fonts multiple times
They still download from CDN every time too, you would still most likely see better performance having them local. I know as soon as I moved my fonts local off a CDN my lighthouse score increased a lot.
It increased it so much so, that I actually get scores of 96, 100, 100, 100 even on mobile with a CLS of 0.038 and a CLS of 0.003 on desktop. Fonts where my biggest issue.
Colombian fino houndOP
Ok, thanks for the feedback
@adam.birds They still download from CDN every time too, you would still most likely see better performance having them local. I know as soon as I moved my fonts local off a CDN my lighthouse score increased a lot.
Colombian fino houndOP
Well if they downloaded once, and were in browser cache for 365 days, they would not download again
Just like if you have certain Google fonts in your browser cache, as you bounce around sites, those fonts are in your cache
@Colombian fino hound Well if they downloaded once, and were in browser cache for 365 days, they would not download again
Then leave them how they are, but just means the first time the CLS will be higher. But as you say about cache, if you did that using local fonts too, once they have visited each of your sites it would be there for a year anyway. So you don't lose either way really.
Colombian fino houndOP
That's a good point. I am probably concerned more about initial load + CLS, vs subsequent visits on our other sites
Thanks for working through this with me
@Colombian fino hound Thanks for working through this with me
No problem, it quite funny really, they used to recommend CDNs for stuff like this but now its gone back the other way.
Colombian fino houndOP
True, things have changed