Fixes ACCOUNTS-FRONTEND-J. Improve fonts loading and use more unicode groups for roboto fonts

.storybook/storyDecorator.tsx

@@ -5,6 +5,7 @@ import { ContextProvider } from 'app/shell';
 import { browserHistory } from 'app/services/history';
 import storeFactory from 'app/storeFactory';
 import 'app/index.scss';
+import 'app/services/font';
 
 import { IntlDecorator } from './decorators';
 

packages/app/index.scss

@@ -65,50 +65,3 @@ label,
 a {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-
-// Declare fonts here, to be sure that want be imported more than once
-// @see https://github.com/majodev/google-webfonts-helper to download some other fonts
-@font-face {
-    font-family: 'Roboto Condensed';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
-        url('./fonts/roboto-condensed/roboto-condensed-v17-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-regular.woff2')
-            format('woff2'),
-        /* Super Modern Browsers */
-            url('./fonts/roboto-condensed/roboto-condensed-v17-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-regular.woff')
-            format('woff'),
-        /* Modern Browsers */
-            url('./fonts/roboto-condensed/roboto-condensed-v17-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-regular.ttf')
-            format('truetype'); /* Safari, Android, iOS */
-}
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Roboto'), local('Roboto-Regular'),
-        /* Super Modern Browsers */
-            url('./fonts/roboto/roboto-v19-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-regular.woff2')
-            format('woff2'),
-        /* Modern Browsers */
-            url('./fonts/roboto/roboto-v19-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-regular.woff')
-            format('woff'),
-        /* Safari, Android, iOS */
-            url('./fonts/roboto/roboto-v19-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-regular.ttf')
-            format('truetype');
-}
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 500;
-    src: local('Roboto Medium'), local('Roboto-Medium'),
-        /* Super Modern Browsers */
-            url('./fonts/roboto/roboto-v19-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-500.woff2')
-            format('woff2'),
-        /* Modern Browsers */
-            url('./fonts/roboto/roboto-v19-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-500.woff')
-            format('woff'),
-        /* Safari, Android, iOS */
-            url('./fonts/roboto/roboto-v19-vietnamese_latin-ext_greek-ext_cyrillic-ext_latin_cyrillic_greek-500.ttf')
-            format('truetype');
-}

packages/app/index.tsx

@@ -12,7 +12,7 @@ import dispatchBsod from 'app/components/ui/bsod/dispatchBsod';
 import getOAuthDebugContext from 'app/components/auth/oauthDebugContext';
 import * as loader from 'app/services/loader';
 import logger from 'app/services/logger';
-import font from 'app/services/font';
+import { loadFonts } from 'app/services/fonts';
 import history, { browserHistory } from 'app/services/history';
 import i18n from 'app/services/i18n';
 import { loadScript, debounce } from 'app/functions';
@@ -41,7 +41,7 @@ authFlow.setStore(store);
 
 Promise.all([
     userFactory(store),
-    font.load(['Roboto', 'Roboto Condensed']),
+    loadFonts(),
     i18n.ensureIntl(), // ensure, that intl is polyfilled before any rendering
 ]).then(() => {
     ReactDOM.render(

packages/app/package.json

@@ -2,6 +2,8 @@
     "name": "app",
     "version": "1.0.0",
     "dependencies": {
+        "@fontsource/roboto": "^5.3.0",
+        "@fontsource/roboto-condensed": "^5.3.0",
         "@formatjs/intl-pluralrules": "^1.5.9",
         "@formatjs/intl-relativetimeformat": "^4.5.16",
         "@hot-loader/react-dom": "^17",
@@ -28,8 +30,7 @@
         "redux": "^4.0.5",
         "redux-localstorage": "^0.4.1",
         "redux-thunk": "^2.0.0",
-        "rtl-detect": "^1.0.2",
-        "webfontloader": "^1.6.26"
+        "rtl-detect": "^1.0.2"
     },
     "devDependencies": {
         "@testing-library/jest-dom": "^5.8.0",
@@ -41,7 +42,6 @@
         "@types/react-motion": "^0.0.29",
         "@types/react-transition-group": "^4.2.4",
         "@types/rtl-detect": "^1.0.0",
-        "@types/webfontloader": "^1.6.30",
         "@types/webpack-env": "^1.15.2",
         "synchronous-promise": "^2.0.17",
         "utility-types": "^3.10.0"

packages/app/services/font.ts

@@ -1,43 +0,0 @@
-import webFont from 'webfontloader';
-import logger from 'app/services/logger';
-
-export default {
-    /**
-     * @param {Array} families
-     * @param {object} options
-     * @param {boolean} [options.external=false] - whether the font should be loaded from external source (e.g. google)
-     *
-     * @returns {Promise}
-     */
-    load(
-        families: string[] = [],
-        options: {
-            external?: boolean;
-        } = {},
-    ): Promise<void> {
-        let config: { [key: string]: any } = {
-            custom: { families },
-        };
-
-        if (options.external) {
-            config = {
-                google: { families },
-            };
-        }
-
-        return new Promise((resolve) =>
-            webFont.load({
-                classes: false,
-                active: resolve,
-                inactive() {
-                    logger.breadcrumb('Failed loading the font', {
-                        families,
-                    });
-                    resolve();
-                },
-                timeout: 2000,
-                ...config,
-            }),
-        );
-    },
-};

packages/app/services/fonts.ts

@@ -0,0 +1,39 @@
+// Each file declares a separate @font-face with its own unicode-range for every subset (latin, cyrillic, greek, etc.),
+// so the browser downloads only the subsets, whose glyphs are actually used on the page
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto-condensed/400.css';
+
+import logger from 'app/services/logger';
+
+const FONTS: ReadonlyArray<string> = [
+    '400 1em Roboto',
+    '500 1em Roboto',
+    '400 1em "Roboto Condensed"',
+];
+
+// The browser loads only the subsets, that intersect with the passed text. Latin and Cyrillic subsets cover
+// most of the interface languages. Other subsets will be loaded on demand, when the text using them will be rendered
+const SAMPLE_TEXT = 'BESbswy БЕСбсв';
+
+const TIMEOUT = 2000;
+
+export function loadFonts(): Promise<void> {
+    if (!document.fonts) {
+        return Promise.resolve();
+    }
+
+    return new Promise((resolve) => {
+        const timer = setTimeout(() => {
+            logger.breadcrumb('Fonts loading timed out');
+            resolve();
+        }, TIMEOUT);
+
+        Promise.all(FONTS.map((font) => document.fonts.load(font, SAMPLE_TEXT)))
+            .catch((error) => logger.breadcrumb('Failed loading the fonts', { error }))
+            .finally(() => {
+                clearTimeout(timer);
+                resolve();
+            });
+    });
+}

yarn.lock

@@ -1269,6 +1269,16 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
   integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
 
+"@fontsource/roboto-condensed@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto-condensed/-/roboto-condensed-5.3.0.tgz#77335105a938e2f33c5a1911d5a5fdf46e09fa70"
+  integrity sha512-Vbh5pesre/M/Jspd10btdKRqLSTe3yn4l6B2tXHGElCeASfA7Pgdpu1mb8wTG8E72J4Xk6FUfqnSe46UN2QAog==
+
+"@fontsource/roboto@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-5.3.0.tgz#fd0dcdaa0c6ef3a1621253ea702db933ca1b573a"
+  integrity sha512-BapRJOWYP+LZ21zp+wBQjfpPYKRoxc4LspJ/RLuI+HSMBD5u/X4O+ESDrSvEqDSy0rAl7GwBJ+09mdc16cVQ1Q==
+
 "@formatjs/ecma402-abstract@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.4.0.tgz#ac6c17a8fffac43c6d68c849a7b732626d32654c"
@@ -3111,11 +3121,6 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
   integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
 
-"@types/webfontloader@^1.6.30":
-  version "1.6.38"
-  resolved "https://registry.yarnpkg.com/@types/webfontloader/-/webfontloader-1.6.38.tgz#2cb965a7e7e4a83af6bac67688bc7d1c076107e8"
-  integrity sha512-kUaF72Fv202suFx6yBrwXqeVRMx7hGtJTesyESZgn9sEPCUeDXm2p0SiyS1MTqW74nQP4p7JyrOCwZ7pNFns4w==
-
 "@types/webpack-env@^1", "@types/webpack-env@^1.15.2":
   version "1.18.8"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.8.tgz#71f083718c094204d7b64443701d32f1db3989e3"
@@ -12380,11 +12385,6 @@ web-vitals@^6.1.1:
   resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-6.2.2.tgz#ff4a7a8d7c5df18074a01f1c4f169e1a57df7193"
   integrity sha512-oto5x6dLEgrRqfcWed+pZEUb2q6ikbFmqF54CRDhI/QGbn+qxC49b4C4OkbH+kb9C3a8shpFD3SgR9kRcs80ZQ==
 
-webfontloader@^1.6.26:
-  version "1.6.28"
-  resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
-  integrity sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==
-
 webfonts-generator@0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/webfonts-generator/-/webfonts-generator-0.3.5.tgz#e2deffb7864484e9f5a93a58607a76752c69da28"