Skip to content
Simple React component to load Google Fonts.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Build files Jan 9, 2019
src Switch from oneOf to oneOfType Jan 9, 2019
.babelrc Initial Commit Nov 28, 2018
.gitignore
.npmignore Update readme.md Nov 28, 2018
README.md Update readme to reflect new changes Jan 9, 2019
package-lock.json Add subsets and minor improvements Jan 8, 2019
package.json update webpack Jun 19, 2019
webpack.config.js Initial Commit Nov 28, 2018
yarn.lock Update packages Aug 15, 2019

README.md

GoogleFontLoader npm

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

Install with either yarn or npm:

yarn add react-google-font-loader
npm install --save react-google-font-loader

Usage

// Import the Component, you can call it whatever you like.
import GoogleFontLoader from 'react-google-font-loader';

const App = () => (
  <>
    {/* Use it! */}
    <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 two props: fonts and subsets.

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 - 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.

['cyrillic-ext', 'greek']
You can’t perform that action at this time.