Import font into React application

Question

I'm trying to use the Roboto font in my app and having tough time..

I did npm install --save typeface-roboto and added import 'typeface-roboto' to my React component. But still can't get my font to change.

I am trying to do like this :

const React = require('react')
import 'typeface-roboto'

class Example extends React.Component {

  render() {

    let styles = {
      root: {
        fontFamily: 'Roboto'
      }
    }

    return (
      <div style={styles.root}>
        <p>
          This text is still not Roboto ?!???!!1
        </p>
      </div>
    )
  }
}
module.exports = Example

Am I missing something? Looking for a simple way to do this without any external css file..

https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects — Paul McLoughlin, Mar 10 '18 at 02:18
@PaulMcloughlin thanks but I came across that question before asking and it made no sense to me at all (im not using create-react-app)... Is there no way to use a font from a local file (node module) with react inline styling (no css file) ?? — Egor Egorov, Mar 10 '18 at 04:12
Could you check [this](https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project) article, it might help. — milkersarac, Mar 26 '18 at 07:51
Possible duplicate of [How to add fonts to create-react-app based projects?](https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects) — tgrrr, Mar 05 '19 at 05:20

score 4 · Answer 1 · answered Mar 05 '19 at 10:02

4

Try adding import 'typeface-roboto'; in root file i.e. index.js file.

In my case I added font-family to body element and it is worked.

answered Mar 05 '19 at 10:02

Parameshwar Ande

807
1
8
16

1

Agreed. I put `import 'typeface-roboto';` in index.js, then I added `font-family: 'Roboto';` in my separate index.css file, and it worked! – hoohoo-b May 31 '19 at 07:22

score 4 · Answer 2 · answered Jul 02 '19 at 06:56

import this code of line in your main css or scss whatever use use

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');

this will work. If you want to customize this then go to the google font and select font style font weight whatever you want. Here i have selected font weight 400,300 and 700 If have not selected the font weight then you can not use other font weight

score 2 · Answer 3 · answered Feb 25 '19 at 06:29

I had the same issue, couldn't get Roboto fonts for my components anyhow.

I used the webfontloader package.

yarn add webfontloader

or

npm install webfontloader --save

h Once you do this, add the following code to your index.js or to the JS file which is an entry point to your application

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});
// rest of the index.js code

And now apply the font-family.

score 1 · Answer 4 · answered Jan 25 '19 at 23:33

You simply just require('typeface-roboto') it.

const React = require('react')
require('typeface-roboto')

class Example extends React.Component {

  render() {

    let styles = {
      root: {
        fontFamily: 'Roboto'
      }
    }

    return (
      <div style={styles.root}>
        <p>
          This is now Roboto
        </p>
      </div>
    )
  }
}

// or here instead if you fancy
    .root {
        font-family: 'Roboto';
    }

require is depricted in es 6 – Akhil Aravind Mar 01 '19 at 06:29 — Akhil Aravind, Mar 01 '19 at 06:29

score 1 · Answer 5 · answered Mar 05 '19 at 05:59

It involves several changes, assuming you want to use CSSinJS:

change style to className
You'll need some kind of library to apply styles.

With react-jss

import React from 'react';
import 'typeface-roboto';
import injectSheet from 'react-jss';

const styles = {
  root: {
    fontFamily: 'Roboto',
  },
};

class Example extends React.Component {
  render() {
    return (
      <div className={styles.root}>
        This text is Roboto
      </div>
    )

  }
}

const StyledExample = injectSheet(styles)(Example)

export default StyledExample;

Or with MaterialUI styles:

import React from 'react';
import 'typeface-roboto';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    fontFamily: 'Roboto',
  },
});

function Example(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      This text is Roboto
    </div>
  );
}

export default withStyles(styles)(Example);

Or, you could just do it the right way, via Dan's Answer

Or the Styled-Components way:

import styled from 'styled-components'

const ExampleStyled = styled.div`
  @font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url(fonts/Roboto.woff) format('woff');
  }
`

const Example = () => (
  <ExampleStyled>
     This text is Roboto!
  </ExampleStyled>
);

export default Example;

Import font into React application

5 Answers5

Linked