diff --git a/src/lib/font-loader-hoc.jsx b/src/lib/font-loader-hoc.jsx index ea05143b9292583a3b685df22d0d0cd16e6e1c51..9e98cf1272c37f8b6be2f3557d0324177d08f6d9 100644 --- a/src/lib/font-loader-hoc.jsx +++ b/src/lib/font-loader-hoc.jsx @@ -4,6 +4,17 @@ import omit from 'lodash.omit'; import {connect} from 'react-redux'; import {setFontsLoaded} from '../reducers/fonts-loaded'; +// This list is from scratch-render-fonts: +// https://github.com/LLK/scratch-render-fonts/blob/master/src/index.js#L4 +const FONTS = [ + 'Sans Serif', + 'Serif', + 'Handwriting', + 'Marker', + 'Curly', + 'Pixel', + 'Scratch' +]; /* Higher Order Component to provide behavior for loading fonts. * @param {React.Component} WrappedComponent component to receive fontsLoaded prop * @returns {React.Component} component with font loading behavior @@ -22,8 +33,12 @@ const FontLoaderHOC = function (WrappedComponent) { typeof document.fonts.values === 'function' && typeof document.fonts.values()[Symbol.iterator] === 'function') { for (const fontFace of document.fonts.values()) { - fontPromises.push(fontFace.loaded); - fontFace.load(); + // Only load fonts from this list. If we load all fonts on the document, we may block on + // loading fonts from things like chrome extensions. + if (FONTS.indexOf(fontFace.family) !== -1) { + fontPromises.push(fontFace.loaded); + fontFace.load(); + } } } return fontPromises;