How to properly load a font-family for my custom library components?

Question

I'm writing a new React UI component library using styled-components and styled-system . This library will be used on a side project and should be published as a npm library.

I'm creating a button component and considering almost every component should have a font-family Roboto like this:

const BaseButton = styled.div`
  font-family: 'Roboto', sans-serif;
`;

Considering that each component is independent from each other, where is the best place to set a default font-family once for my entire component library?

Thank you

Answer 1

If you want mostly all your components to use Roboto you should set the @font-face up globally.

import { createGlobalStyle } from "styled-components";
import Roboto from './Roboto.otf';
import SecondaryFont from './SecondaryFont.otf';

const GlobalStyles = createGlobalStyle`
  @font-face {
    font-family: 'Roboto';
    src: url('${Roboto}') format('opentype');
  }
  @font-face {
    font-family: 'SecondaryFont';
    src: url('${SecondaryFont}') format('opentype');
  }

  body {
    font-family: 'Roboto', sans-serif;
  }
`

const YourCustomProvider = ({ children }) => (
  <>
    <GlobalStyles />
    {children}
  </>
)

// Inform users to wrap their app with your provider
const App = () => {
  return (
    <YourCustomProvider>
      // Their app
    </YourCustomProvider>
  )
}

Then to use the secondary font on specific components.

const RandomComponent = styled.div`
  font-family: "SecondaryFont"
`