React Font Loader

React Font Loader works with any Google Fonts for instance. Ideally you would use it inside a layout component that wraps everything or a Theme Provider.

yarn add react-font-loader

Use as a component

import React from 'react'
import ReactFontLoader from 'react-font-loader'

const App = () => {
  return (
    <div>
      <ReactFontLoader url='https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700&display=swap' />
      <h1 style={{ fontFamily: 'Red Hat Display' }}>Custom font</h1>
    </div>
  )
}

export default App

Use as a hook

import React from 'react'
import useReactFontLoader from 'react-font-loader'

const App = () => {
  useReactFontLoader({
    url:
      'https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700&display=swap',
  })

  return (
    <div>
      <h1 style={{ fontFamily: 'Red Hat Display' }}>Custom font</h1>
    </div>
  )
}

export default App