how to use external fonts in react

Muhammad Gulshair answered on January 10, 2021 Popularity 8/10 Helpfulness 3/10

answer how to use external fonts in react

related how to add custom font to react project

related How to include custom fonts in a react project

how to use external fonts in react

Comment

@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

Popularity 8/10 Helpfulness 3/10 Language typescript

Source: stackoverflow.com

Tags: external fonts typescript

Link to this answer
Share Copy Link

Contributed on Mar 03 2024

Muhammad Gulshair

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

how to use external fonts in react

Contents

More Related Answers

how to use external fonts 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.