Why use @import to use google fonts in React app?

Question

I would like to understand why I have to use @import instead of url to use google fonts in react app.
I've tried to use url link in html head, but the app was unable to use the google fonts.
And I found this solution on Stackoverflow that I have to use @import to solve this issue, but I was wondering why.

link: How to use Google fonts in React.js?

can you please explain why the link in html head didn't work?

Answer 1

it's not related to react itself but it's related to the CSS, since you can't import a component or another function in react or in javascript in general, using @import syntax, but you can use it in CSS files to import another stylesheet to your style file such as fonts.

reference : @import | MDN