Local next/font import blocking LCP
Answered
Yellow-breasted Bunting posted this in #help-forum
Yellow-breasted BuntingOP
Hey all I have a new project and I'm importing some custom fonts using
Any advice is appreciated! Thanks
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts
Chrome performance tree screenshot below, see the
import localFont from "next/font/local"; but it seems like it's effecting the render time. I would had thought the page would load in parallel while the fonts download. I followed how the implementation is on the docs, is this expected? Any advice is appreciated! Thanks
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts
Chrome performance tree screenshot below, see the
.otf font files blocking the render10 Replies
Yellow-breasted BuntingOP
Oh I bet theres some config to do.. I assumed this would be automatic
I didnt declared a fallback 
Yellow-breasted BuntingOP
ok, I'm using fallbacks and
adjustFontFallback: 'Times New Roman' but no change 🤔And it defaults to arial anyway
Yellow-breasted BuntingOP
ahhhhh 'preload'
Answer
Yellow-breasted BuntingOP
back in the green ðŸ‘
Yellow-breasted BuntingOP
I spoke too soon, could of been a fluke? seems like my deployed tests have a LCP of ~4 seconds
With custom fonts disabled the LCP is ~1 second
Yellow-breasted BuntingOP
ok localhost lighthouse is inaccurate.. should have known
for my usecase, only preloading the fonts which are used for LCP and defering the rest gave me good scores. ðŸ‘