Try to fix FontFace support in Edge/IE/Safari

newIDE/app/package.json

@@ -18,6 +18,7 @@
     "classnames": "^2.2.5",
     "element-closest": "^2.0.2",
     "flat": "2.0.1",
+    "fontfaceobserver": "^2.0.13",
     "i18next": "^10.0.3",
     "keen-tracking": "1.1.3",
     "lodash.assignin": "^4.2.0",

newIDE/app/src/ObjectsRendering/PixiResourcesLoader.js

@@ -1,6 +1,7 @@
 import slugs from 'slugs';
 import PIXI from 'pixi.js';
 import ResourcesLoader from './ResourcesLoader';
+import { loadFontFace } from '../Utils/FontFaceLoader';
 const gd = global.gd;
 
 const loadedFontFamilies = {};
@@ -105,12 +106,13 @@ export default class PixiResourcesLoader {
       return Promise.resolve(loadedFontFamilies[fontFilename]);
     }
 
-    // Load the given font using CSS Font Loading API.
     const fontFamily = slugs(fontFilename);
     const fullFilename = ResourcesLoader.getFullFilename(project, fontFilename);
-    const fontFace = new FontFace(fontFamily, `url("${fullFilename}")`, {});
-    document.fonts.add(fontFace);
-    return fontFace.load().then(loadedFace => {
+    return loadFontFace(
+      fontFamily,
+      `url("${fullFilename}")`,
+      {}
+    ).then(loadedFace => {
       loadedFontFamilies[fontFilename] = fontFamily;
 
       return fontFamily;

newIDE/app/src/Utils/FontFaceLoader.js

@@ -0,0 +1,36 @@
+import FontFaceObserver from 'fontfaceobserver';
+
+/**
+ * A simple wrapper around FontFace (if supported) or @font-face + FontFaceObserver
+ * to load a font from an url and be notified when loading is done (or failed).
+ * @param {*} fontFamily
+ * @param {*} src
+ * @param {*} descriptors
+ */
+export const loadFontFace = (fontFamily, src, descriptors = {}) => {
+  if (typeof FontFace !== 'undefined') {
+    // Load the given font using CSS Font Loading API.
+    const fontFace = new FontFace(fontFamily, src, descriptors);
+    document.fonts.add(fontFace);
+    return fontFace.load();
+  } else {
+    // Add @font-face and use FontFaceObserver to be notified when the
+    // font is ready.
+    const newStyle = document.createElement('style');
+    newStyle.appendChild(
+      document.createTextNode(
+        `@font-face {
+          font-family: ${fontFamily};
+          src: ${src};
+        }`
+      )
+    );
+
+    document.head.appendChild(newStyle);
+    return new FontFaceObserver(fontFamily, descriptors).load().catch(err => {
+      console.warn(`Error while loading font ${fontFamily}`, err);
+
+      throw err;
+    });
+  }
+};

newIDE/app/yarn.lock

@@ -3092,6 +3092,10 @@ follow-redirects@^1.2.3:
   dependencies:
     debug "^2.4.5"
 
+fontfaceobserver@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz#47adbb343261eda98cb44db2152196ff124d3221"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -5616,14 +5620,14 @@ promise@7.1.1, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.6.0:
+prop-types@^15.5.6, prop-types@^15.5.9, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -5794,13 +5798,13 @@ react-display-name@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.0.tgz#0e1f7086e45a32d07764df35ed32ff16f1259790"
 
-react-dnd-html5-backend@2.3.0, react-dnd-html5-backend@^2.1.2:
+react-dnd-html5-backend@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.3.0.tgz#a45ce593f5c6944aa01114b368117c56c954804e"
   dependencies:
     lodash "^4.2.0"
 
-react-dnd-html5-backend@^2.5.4:
+react-dnd-html5-backend@^2.1.2, react-dnd-html5-backend@^2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.5.4.tgz#974ad083f67b12d56977a5b171f5ffeb29d78352"
   dependencies:
@@ -5816,7 +5820,7 @@ react-dnd-scrollzone@^4.0.0:
     raf "^3.2.0"
     react-display-name "^0.2.0"
 
-react-dnd@2.3.0, react-dnd@^2.1.4:
+react-dnd@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.3.0.tgz#aede61c06b968554dcf2a2445657cdbb3100be49"
   dependencies:
@@ -5826,7 +5830,7 @@ react-dnd@2.3.0, react-dnd@^2.1.4:
     invariant "^2.1.0"
     lodash "^4.2.0"
 
-react-dnd@^2.5.4:
+react-dnd@^2.1.4, react-dnd@^2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.5.4.tgz#0b6dc5e9d0dfc2909f4f4fe736e5534f3afd1bd9"
   dependencies: