0

I'm having issues changing the font family of my react components. I have a header component that uses "satisfy",cursive, and it renders like it is shown on googlefonts. I have another component that I am trying to apply "Roboto Slab",serif, but it only renders out the basic serif font. This happens when I try other fonts as well, only the generic font family renders. But then I tried importing the exact same font family from my header componenet, and it renders perfectly fine. I am pasting the import option into my css. Why do some fonts work correctly while others only render the generic?

  • what is your code that you are using to call google fonts? Could this be what you are asking? https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file – JCBiggar Feb 25 '21 at 00:08
  • import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&family=Roboto+Slab:wght@600&display=swap"); and then Im adding font-family: 'Roboto Slab', serif; into my components css. This will only render generic serif, but when I use import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap"); font-family: "Satisfy", cursive; it renders the unique font. –  Feb 25 '21 at 00:45
  • are you adding this to your css? `@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&family=Roboto+Slab:wght@600&display=swap%22');` – JCBiggar Feb 25 '21 at 02:06
  • I dont seem to be having this issue when I try it. https://jsfiddle.net/wpv4syca/ – JCBiggar Feb 25 '21 at 02:07

0 Answers0