2

I would like to use Google Fonts in React. I am using 

import 'https://fonts.googleapis.com/css?family=Josefin+Sans';

in App.js and 

font-family: 'Josefin Sans', cursive;

in the component.css and I am getting a failed to compile error.

leonheess
  • 16,068
  • 14
  • 77
  • 112
Ben C.
  • 39
  • 1
  • 3
  • your question is already answerd here: https://stackoverflow.com/questions/40769551/how-to-use-google-fonts-in-react-js/47733243#47733243 – Elizbeth Feb 28 '18 at 22:02
  • Duplicate post you can check answer here: https://stackoverflow.com/questions/40769551/how-to-use-google-fonts-in-react-js/47733243#47733243 – Rizwan Feb 28 '18 at 22:04

2 Answers2

2

AFAIK you CAN'T import files from URL. You have to host it in local (grab the entire file), or include it in your page's header as you'd do with another "basic" stylesheet.

Edit

Use the @import syntax in your component.css.

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

Dylan

Dylan Gauthier
  • 278
  • 1
  • 8
0

go to component.css

for local font : 

@font-face {
    src: url('./fonts/Report-Bold.ttf')  format('ttf');
}

for google font:

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
Sofiyan Ben_Z
  • 21
  • 3
  • Hi, and thanks for this answer. To improve it, you should wrap your code samples in code fences, for better readability. Have a nice day ! – Grégoire Roussel Jan 16 '20 at 10:42