Import font into React application - css

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

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 3

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 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:
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;