DEV Community

Discussion on: What's the most efficient way to load custom fonts on the web

Collapse
 
nickytonline profile image
Nick Taylor

I was using webfontloader in the previous version of my site.

GitHub logo typekit / webfontloader

Web Font Loader gives you added control when using linked fonts via @font-face.

Web Font Loader

Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit.

Build Status

Contents

Get Started

To use the Web Font Loader library, just include it in your page and tell it which fonts to load. For example, you could load fonts from Google Fonts using the Web Font Loader hosted on Google Hosted Libraries using the following code.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">

I was using Gatsby under the hood, so webfontloader was wrapped in this Gatsby plugin, gatsby-plugin-web-font-loader.