TIL - Adding Fonts to a React App

Google Fonts

• go to https://fonts.google.com/
• choose your font + all the styles you need

• click on "Embed"
• copy the link

 <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet"> 

• go to the the public - folder, add it in index.html to the <header>

Downloaded Fonts

Create a Fonts-folder in the source directory

.src/fonts

Copy the fonts you want to use (e.g. AssistantRegular.ttf) into the ‘fonts‘ directory.

In the project’s index.js, import the fonts you want to use.

import './fonts/assistant.regular.ttf'; 

In the projects index.css add the font-face

@font-face {
  font-family: "AssistantRegular";
  src: local("AssistantRegular"),
    url("./fonts/assistant.regular.ttf") format("truetype");
  font-weight: normal;
}

.woff -> format("woff"),
.ttf -> format("truetype")
.eot -> format('embedded-opentype')
.svg#vtks_sonhoregular _> format('svg')

Now the font/s are available to the project and can be used in regular CSS etc

.body {
  font-family: AssistantRegular
  ...
}

Comments

[Yair Even Or]

why do you need to import the font file in a javascript?
seems like weird step

import './fonts/assistant.regular.ttf'; 

There are webpack loaders which will do it automatically, this this one:
npmjs.com/package/resolve-url-loader

@font-face {
  font-family: "AssistantRegular";
  src: local("AssistantRegular"),
    url("./fonts/assistant.regular.ttf") format("truetype");
  font-weight: normal;
}