Wondering what’s next for npm?Check out our public roadmap! »

    use-google-fonts
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    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:

    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

    Options

    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
    })

    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:

    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>
        )
      }
    }

    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

    Install

    npm i use-google-fonts

    DownloadsWeekly Downloads

    159

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    12.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar