I made a small library of React components but the problem is that I’m using Material UI. Material UI is using Roboto font which has to be linked to HTML head.
How can I export each React component with the Roboto font included?
Thanks!
2 Answers
You can import Roboto inside any of your components like module
https://www.npmjs.com/package/@fontsource/roboto
import "@fontsource/roboto"; // Defaults to weight 400.
Also check official Material UI docs here https://mui.com/material-ui/react-typography/#install-with-npm
As stated in my last comment above
I guess wrapping all texts inside your custom components is the only way to "provide" the font-family: Roboto; css style to the element and its descendants. Workaround for that could be <Box style={{fontFamily: "Roboto"}} or wrapping styled component for example with css styling : font-family: Roboto
See example here https://codesandbox.io/s/kind-forest-x93th3?file=/src/hello.jsx
Related