Use Google Fonts
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.
Installation
Installing the hook
npm i use-google-fonts
Usage
Say you want to import Roboto (all weights) and Open Sans (300 only).You can use the hook as follows:
Full example:
{ return <h1 style= fontFamily: "'Roboto', sans-serif" > Roboto Heading </h1> <p style= fontFamily: "'Open Sans', sans-serif" > Open Sans body </p> }
Options
There are only a couple of options:
JSX Component Usage
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:
Component { 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/Appjs</code> and save to reload </p> </div> }
Changelog
1.0.2 (20 January 2020)
- Added a JSX component as an alternative to the hook
- Updated this README.md
1.0.1 (19 January 2020)
- Initial release