A super simple and very light weight (948 bytes minified) Javascript library to load (a single or multiple) Google Font(s). It will:

• load the stylesheet for the fonts from https://fonts.googleapis.com/css2
• call document.fonts.load for each font
• resolve.

Use this if you need to be absolutely sure the Google Fonts you use in your project are all fully loaded and ready to use (f.e. when you use Google Fonts on a <canvas>).

GoogleFontLoader can be used instead of TypeKit's ancient webfontloader, albeit strictly for Google Fonts. GoogleFontLoader is much lighter (1kB vs 12kB minified) and more modern.

Download GoogleFontLoader.js or its minified cousin GoogleFontLoader.min.js and place it on your server, somewhere within the document root. Then include it in your page like so:

<script src="/path/to/dist/GoogleFontLoader.min.js"></script>

Load Google Fonts like this:

GoogleFontLoader
.load(ArrayOfFontFamilies)
.then(...)

For example:

// Just load the `Anton` font family:
GoogleFontLoader
.load(["Anton"])
.then(() => { console.log('Anton font family loaded successfully') })

// Load 'Anton', 'Concert One', 'Passion One' and 'Titan One' (these fonts all have just one style)
// Load 'Passion One' in a single variant: 400 (regular)
// Load 'Londrina Solid' in two variants: 400 (regular) and 900 (black)
GoogleFontLoader
.load(["Anton", "Concert One0", "Titan One", "Londrina Solid:400", "Londrina Solid:900"]);
.then(() => { console.log('Fonts loaded successfully') })

// Load the Roboto font family in all its 12 variants
GoogleFontLoader.load(["Roboto:100", "Roboto:100i", "Roboto:300", "Roboto:300i", "Roboto:400", "Roboto:400i", "Roboto:500", "Roboto:500i", "Roboto:700", "Roboto:700i", "Roboto:900", "Roboto:900i"])
.then(() => { console.log('Fonts loaded successfully') })

Or using async/await:

await GoogleFontLoader.load(["Anton", "Roboto:500i"])
// Render something in the 'Anton' or 'Roboto:500i' font variants

If you like what I've made here, you can sponsor me with a donation. Thank you so much!

This plugin is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with the code. More Information

The development of this component was funded by Zygomatic.