I use styled component
for library css on my ReactJS application. I want to @font-face
but not working.
code on GlobalStyle.js
import { createGlobalStyle } from 'styled-components';
import MaisonBook from '../assets/fonts/MaisonNeue-Book.ttf';
const GlobalStyle = createGlobalStyle`
@font-face {
font-family: Maison Nueue;
src: url(${MaisonBook});
}
@font-face {
font-family: Maison Nueue;
src: url('../assets/fonts/MaisonNeue-Bold.ttf');
font-weight: bold;
}
`
export default GlobalStyle;
on index.js
....
ReactDOM.render(
<React.StrictMode>
<GlobalStyle/>
<MainRouter />
</React.StrictMode>,
document.getElementById('root')
);
....
@font-face {
font-family: "MaisonNueue";
src: url(${require('../assets/fonts/MaisonNeue-Book.otf')}) format("truetype");
}
@font-face {
font-family: "MaisonNueueBold";
src: url(${require('../assets/fonts/MaisonNeue-Bold.otf')}) format("truetype");
}