A React hook for importing Google Fonts. Mostly (completely) borrowed from shelldandy on this Next.js GitHub issue.
Uses fontfaceobserver with some optional body classes.
Installing the hook
npm i use-google-fonts
Say you want to import Roboto (all weights) and Open Sans (300 only).You can use the hook as follows:
useGoogleFonts([['Roboto'], ['Open Sans', '300']])
Full example:
import React from 'react'
import useGoogleFonts from 'use-google-fonts'
function MyReactComponent() {
useGoogleFonts([
['Roboto'],
['Open Sans']
])
return (
<h1 style={{ fontFamily: "'Roboto', sans-serif" }}>
Roboto Heading
</h1>
<p style={{ fontFamily: "'Open Sans', sans-serif" }}>
Open Sans body
</p>
)
}
export default MyReactComponent
There are only a couple of options:
useGoogleFonts([['Roboto', '400']], {
addBodyClass: true, // This adds 'roboto' to the body class when loaded
display: 'swap' // Display mode
})
If you're not into the useGoogleFonts()
hook, you can place a JSX element
anywhere in your app to import the fonts. Ideally this should be at the 'start'
of your app, E.g. in app.js
<GoogleFonts fonts={[['Montserrat', '800'], ['Open Sans']]} />
With options:
<GoogleFonts fonts={[['Montserrat']]} options={{ addBodyClass: true }} />
Full example using a class component:
import React from 'react'
import { GoogleFonts } from 'use-google-fonts'
class App extends React.Component {
render() {
return (
<div className='App'>
// 1. Import your font(s)
<GoogleFonts fonts={[['Montserrat', '800']]} />
<div className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<h2>Welcome to React</h2>
</div>
// 2. Specify your font-family
<p style={{ fontFamily: "'Montserrat', sans-serif" }}>
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
)
}
}
- Added a JSX component as an alternative to the hook
- Updated this README.md
- Initial release