Create-react-app: What is the best way to include Google fonts (or any other) into create-react-based applications

[nomadus]

As the subject suggest, I would like to receive a recommended way to including Google fonts into create-react-based applications.

[ianschmitz]

The process doesn't need to be any different than usual when using CRA. You can simply add the font to your index.html, and use the index.css to specify your font styles.

[nomadus]

I came across this post, there are two options though.
https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects, which lists two options.
In my case, I start off from scss file, where font is included and then css is created by using npm-sass-chokidar. As it is advised to generate css out of scss (not to store css file), it would be helpful to cover this option as well.

[ianschmitz]

I believe that post was geared more towards using custom fonts. I'm guessing you are referring to using something such as Roboto? You shouldn't have any issues following the instructions on the Google page (i've used the same font in past).

[notrab]

Place the import script inside index.html and away you go 😏

[robcaldecott]

You can import it!

npm install typeface-roboto --save

In index.js:

import "typeface-roboto";

That's it. Webpack will include the font files in your production builds.

All the Google fonts are on npm.

[robcaldecott]

Want Font Awesome? Also this simple:

npm install --save font-awesome

import "font-awesome/css/font-awesome.css";

HTH.

[gaearon]

I would just put them in public/index.html and src/index.css as suggested above.

[selrond]

@robcaldecott Should be mentioned - only latin character set is currently supported

[ackvf]

For <link/> vs import - Is any one approach better than other - and why?

[OmarZeidan]

I would just put them in public/index.html and src/index.css as suggested above.

Hmm @gaearon , what about if you have 2 fonts? one for LTR and one for RTL? and you are using i18n or i18next to switch the language without the need for page reload?

Don't you think using something like webfontloader would help, like you listen to the language and load the needed font?

Would love hearing your thoughts.

[OmarZeidan]

For <link/> vs import - Is any one approach better than other - and why?

Well, I think that using <link> considered a rendering block and the page speed might yell at you.

On the other hand, using import would end up loading the system font first and the page will blink once the file get fetched and the font is ready to be used.

The blink will happen only once, the browser will cache it for you _(make sure you don't have your devtool open and disable cache is enabled ;) it happened to me lol)_