Google Fonts are not loading

[karuppusamy-d]

Google fonts don't have onLoad="this.media='all'"

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" media="print">

Firefox Dev Tools:

[timlrx]

It's most probably a browser issue, not google fonts. I guess you don't see the inter font on the demo page?
https://tailwind-nextjs-starter-blog.vercel.app/

What version of firefox are you using? Preload works for firefox 85 onwards. https://caniuse.com/?search=preload

[karuppusamy-d]

It's most probably a browser issue, not google fonts. I guess you don't see the inter font on the demo page?
https://tailwind-nextjs-starter-blog.vercel.app/

What version of firefox are you using? Preload works for firefox 85 onwards. https://caniuse.com/?search=preload

I am using latest Firefox@88, and it is not a browser issue.

onLoad on _document.js is handed on server side, if you inspect font link tag there will be no onload event

https://stackoverflow.com/questions/54278498/putting-event-handlers-inside-nextjs-document-and-relationship-between-nextj

[timlrx]

Ok this is the related issue: vercel/next.js#12984

Without the onload it will not load it asynchronously but it still displays fine on my side. Can I check that the demo page does not show the Inter font for you? If so then it might be how media or preload is treated differently across browsers.

Anyway, I am good with upgrading to next.js 10.2 and use their recommended automatic webfont optimization

[karuppusamy-d]

I have just installed inter font on my pc, Now it is showing correctly for me.

[timlrx]

Bumped up nextjs to 10.2 and use the recommended automatic font optimization. This should fix the issue.