0

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?

doobean
  • 1,929
  • 4
  • 19
  • 27

2 Answers2

0

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

fadi omar
  • 740
  • 5
  • 15
  • Thanks for the answer. Could you please explain the meaning by "can't import a component or function in react"? does it mean the google fonts mdn added in html head can't be loaded in components? but isn't all the components under the html body in the end? why this link in head can't affect them? – doobean Jul 27 '20 at 13:03
  • to import things in CSS you should use `@import`, – fadi omar Jul 27 '20 at 13:09
  • but yo import things in javascript (or in Reactjs specially) you sould use `export import` syntax, you should read this : - https://create-react-app.dev/docs/importing-a-component/ - https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export – fadi omar Jul 27 '20 at 13:12
0

its not related to React at you can import google fonts from your css file, you can also do the same thing in your app.css file in react as well.

Michael Fazekas
  • 1
  • 1