GoogleFontLoader

Maintained fork of react-google-font-loader.

This is a really simple component that can automatically handle loading Google fonts for you.

You simply pass it a config array and it will load the fonts for you by appending a <link /> tag to the document head. It will update itself if the config changes, and will remove itself on unmount.

Installation

npm install --save react-google-font

Usage

import GoogleFontLoader from 'react-google-font'

function App() {
  return (
    <>
      <GoogleFontLoader
        fonts={[
          {
            font: 'Roboto',
            weights: [400, '400i'],
          },
          {
            font: 'Roboto Mono',
            weights: [400, 700],
          },
        ]}
        subsets={['cyrillic-ext', 'greek']}
      />
      <p style={{ fontFamily: 'Roboto Mono, monospaced' }}>This will be in Roboto Mono!</p>
      <p style={{ fontFamily: 'Roboto, sans-serif' }}>This will be in Roboto!</p>
    </>
  )
}

Props

The Component takes three props: fonts, subsets and text.

fonts

fonts should be an array of objects describing the fonts you want to load:

[
    {
        font: 'Roboto Mono', // The name of the font on Google Fonts.
        weights: [400, 700], // An array of weights you want to load, can be strings or numbers.
    },
    // ...
    // You can include as many of these objects as you want.
]

subsets

subsets should be an array of subsets you want to load. This prop is optional and shouldn't be used with text - if you do not specify a subsets prop then the 'subset' query param will be omitted from the URL and only latin will be loaded.

text

text should be a string containing the characters you wan't the loaded font files to contain. This prop is optional and shouldn't be used with subsets - if you do not specify a text prop then the 'text' query param will be omitted from the URL.

['cyrillic-ext', 'greek']

License

MIT