I'm using React-JSS. I've been able to use the createUseStyles method to add styles to various elements. Now I want to set up some font-face rules but I'm not sure how I would do that with React-JSS.
In normal html, you'd define the font-face rules in index.css and import the css file in index.js. Then you'd be able to use the font-family name as defined in index.css. But what's the procedure in React-JSS?
I had to figure this out. If someone has something better, please share.
import React from 'react'
import { createUseStyles } from 'react-jss'
const useStyles = createUseStyles({
'@font-face': [
{
fontFamily: 'Poppins',
src: 'url(/assets/fonts/Poppins/Poppins-Thin.ttf)',
fontWeight: 100,
},
{
fontFamily: 'Poppins',
src: 'url(/assets/fonts/Poppins/Poppins-ExtraLight.ttf)',
fontWeight: 200,
},
{
fontFamily: 'Poppins',
src: 'url(/assets/fonts/Poppins/Poppins-Light.ttf)',
fontWeight: 300,
},
{
fontFamily: 'Poppins',
src: 'url(/assets/fonts/Poppins/Poppins-Regular.ttf)',
fontWeight: 400,
},
{
fontFamily: 'Poppins',
src: 'url(/assets/fonts/Poppins/Poppins-Medium.ttf)',
fontWeight: 500,
},
{
fontFamily: 'Poppins',
src: 'url(/assets/fonts/Poppins/Poppins-SemiBold.ttf)',
fontWeight: 600,
},
{
fontFamily: 'Poppins',
src: 'url(/assets/fonts/Poppins/Poppins-Bold.ttf)',
fontWeight: 700,
},
],
})
function FontFaces(props) {
useStyles()
return props.children
}
class App extends React.Component {
render() {
return (
<FontFaces>
<div>Whatever else</div>
</FontFaces>
)
}
}