What is the easiest way to add Google Font to a React Application?

Question

I am running in to trouble trying to add Google Fonts in to my React Application, Does anyone know the easiest way to do this?

score 3 · Accepted Answer · answered Aug 27 '19 at 17:10

3

You can import it like this

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>

Within the <head> tag in your index.html file

Hope this helps.

answered Aug 27 '19 at 17:10

Shmili Breuer

score 0 · Answer 2 · answered Aug 27 '19 at 17:14

If you want to make it available across your whole application, you can simply include a stylesheet tag in your index.html

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Then you can simply style your component

const Komponent = () => (
  <h1 style={{ fontFamily: 'Roboto' }}> Styled Text </h1>
);

2 Answers2