Breaking News: Grepper is joining You.com. Read the official announcement!

add font in react

Add Answer

Salih Zorer answered on January 10, 2021 Popularity 10/10 Helpfulness 3/10

answer add font in react

related how to add custom font to react project

related How to include custom fonts in a react project

add font in react

Comment

add font in react

/*
Create src/fonts
Add fonts.css in it.
Import your fonts from url or define them from files directly...
... in this fonts.css.
Import this file in src/index.js.

See below for example contents of fonts.css;

 
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

 /* ------ or ------ */

@font-face {
font-family: "GoldmanBold";
src: local("GoldmanBold"),
 url("./fonts/Goldman/Goldman-Bold.ttf") format("truetype");
font-weight: bold;
}

// Now you are free to use them in any element;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;

/* ------ or ------ */

    font-family: "GoldmanBold"
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: add css

Link to this answer
Share Copy Link

Contributed on Feb 02 2023

Salih Zorer

0 Answers Avg Quality 2/10

Closely Related Answers

how to add custom font to react project

Comment

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: add

Link to this answer
Share Copy Link

Contributed on Jan 10 2021

Kami

0 Answers Avg Quality 2/10

How to include custom fonts in a react project

Comment

/*Create a directory "fonts" in your src folder
Move your font files in the "fonts" directory
Create / In your App.css file, you can use them as followed
*/

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

/*Import the App.css file in your App.js*/

Popularity 10/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link

Contributed on May 08 2021

Strange Seahorse

0 Answers Avg Quality 2/10

add font in react

Contents

More Related Answers

add font in react

Closely Related Answers

how to add custom font to react project

How to include custom fonts in a react project

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.