react-font-loader

React component to load Google fonts

Usage no npm install needed!

<script type="module">
  import reactFontLoader from 'https://cdn.skypack.dev/react-font-loader';
</script>

README

React Font Loader

npm npm bundle size NPM semantic-release

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