Simple React component to load Google Fonts.

Usage no npm install needed!

<script type="module">
  import reactGoogleFontLoader from '';


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.


Install with either yarn or npm:

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


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

const App = () => (
    {/* Use it! */}
          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>


The Component takes two props: fonts and subsets.


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 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']