Href turning into data-href

user_11984248 0
Viewed 851

So I have this weird problem in my Next JS app, I imported google fonts as shown below

<link
 href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Source+Serif+Pro:wght@300;400;500&display=swap"
rel="stylesheet"
    
/>

and instead of href in my browser it shows data-href="...", so problem is that google doesn't recognize this as link

can someone explain why is this happening and, is there a way to block this from happening?

next.js reactjs google-webfonts href fonts
1 Answers

This is because Next introduced Font Optimization:

By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations.

So, it modified href to be data-href because it no longer needs href since it won't be making that request on the client. I'm not sure why it needs data-href at all, I would think it could just throw away the URL after building.

user_22237060
Related