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..

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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';
    }

Answer 5

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

1. change style to className
2. 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;