Skip to content

React component or hook to load Google fonts

Notifications You must be signed in to change notification settings

rfoel/react-font-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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