@imposium-hub/components 1.38.5 → 1.38.7

package/components/compositions/TextLayer.tsx

@@ -12,6 +12,7 @@ interface ITextLayerProps {
 
 interface ITextLayerState {
     fontLoaded : boolean;
+    fontError : boolean;
 }
 
 export default class TextLayer extends React.PureComponent<ITextLayerProps, ITextLayerState> {
@@ -23,6 +24,7 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
         super(props);
 
         this.state = {
+            fontError: false,
             fontLoaded: false
         };
 
@@ -89,11 +91,15 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
         if (font_type === FONT_TYPES.CUSTOM && font_size && custom_font_url) {
 
             const fontOrigin = s3Url(custom_font_url, ASSET_DISTRO, ASSET_ORIGIN);
-
+            let fontLoaded = false;
             // Not sure why you need to pass the size in here, but .check() throws an error without it.
-            const loaded = document.fonts.check(`${font_size}px ${font}`);
+            try {
+                fontLoaded = document.fonts.check(`${font_size}px ${font}`);
+            } catch {
+                this.errorLoadingFont();
+            }
 
-            if (!loaded) {
+            if (!fontLoaded) {
                 this.setState({
                     fontLoaded: false
                 }, () => {
@@ -158,7 +164,12 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
     }
 
     private errorLoadingFont() {
-        // TODO: handle a font loading error
+
+        this.setState({
+            fontError: true
+        }, () => {
+            this.fontReady();
+        });
     }
 
     private fontReady() {
@@ -187,6 +198,8 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
         const {options: {color, background_color, line_height, word_spacing,
             letter_spacing, font_size, font, horizontal_alignment, vertical_alignment, text_wrap}} = this.props;
 
+        const {fontError} = this.state;
+
         const whiteSpace = (text_wrap) ? 'normal' : 'nowrap';
         const lS = (letter_spacing) ? `${letter_spacing}px` : 'normal';
         const wS = (word_spacing) ? `${word_spacing}px` : 'normal';
@@ -200,7 +213,7 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
             letterSpacing: lS,
             fontSize: fS,
             whiteSpace: whiteSpace as any,
-            fontFamily: font
+            fontFamily: (!fontError) ? font : 'Arial, helvetica, sans-serif'
         };
 
         const wrapperStyle = {