learningequality · rtibbles · Dec 1, 2021 · Nov 18, 2021 · Nov 18, 2021 · Nov 18, 2021
diff --git a/kolibri/core/assets/src/utils/setupAndLoadFonts.js b/kolibri/core/assets/src/utils/setupAndLoadFonts.js
@@ -1,12 +1,14 @@
 import FontFaceObserver from 'fontfaceobserver';
 import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
 import logger from 'kolibri.lib.logging';
-import { browser, userAgent, passesRequirements } from './browserInfo';
+import { browser, passesRequirements } from './browserInfo';
 import plugin_data from 'plugin_data';
 
 const logging = logger.getLogger(__filename);
 
-const modernFontBrowsers = {
+// These browsers fully support font-display: swap
+// https://caniuse.com/?search=swap
+const fontSwapSupportingBrowsers = {
   Edge: {
     major: 17,
   },
@@ -35,7 +37,12 @@ const modernFontBrowsers = {
   },
 };
 
-function loadFullFonts() {
+// See
+// https://github.com/learningequality/kolibri-design-system/blob/main/lib/styles/definitions.scss
+const FULL_FONTS = 'full-fonts-loaded';
+const PARTIAL_FONTS = 'partial-fonts-loaded';
+
+function loadFullFontsProgressively() {
   /*
    * This function eagerly loads the full fonts for the current language asynchronously, but
    * avoids referencing them until they've been fully loaded. This is done by adding a
@@ -44,26 +51,8 @@ function loadFullFonts() {
    *
    * This prevents the text from being invisible while the fonts are loading ("FOIT")
    * and instead falls back on system fonts while they're loading ("FOUT").
-   *
-   * We need to do this even for 'modern' browsers, because not all browsers implement
-   * fall-back behaviors of the font stacks correctly. See:
-   *
-   *    https://bugs.chromium.org/p/chromium/issues/detail?id=897539
    */
-
-  // We use the <html> element to store the CSS 'loaded' class
   const htmlEl = document.documentElement;
-  const FULL_FONTS = 'full-fonts-loaded';
-  const PARTIAL_FONTS = 'partial-fonts-loaded';
-
-  // Skip partial font usage and observer for Edge browser as a workaround for
-  //   https://github.com/learningequality/kolibri/issues/4515
-  // TODO: figure out exactly why this was happening and remove this logic.
-  if (/Edge/.test(userAgent)) {
-    htmlEl.classList.add(FULL_FONTS);
-    return;
-  }
-
   htmlEl.classList.add(PARTIAL_FONTS);
 
   const uiNormal = new FontFaceObserver('noto-full', { weight: 400 });
@@ -82,6 +71,11 @@ function loadFullFonts() {
     });
 }
 
+function loadFullFontsImmediately() {
+  const htmlEl = document.documentElement;
+  htmlEl.classList.add(FULL_FONTS);
+}
+
 function addFontStylesheetLink(href) {
   const fonts = document.createElement('link');
   fonts.rel = 'stylesheet';
@@ -91,10 +85,11 @@ function addFontStylesheetLink(href) {
 }
 
 export default function setupAndLoadFonts() {
-  if (passesRequirements(browser, modernFontBrowsers)) {
+  if (passesRequirements(browser, fontSwapSupportingBrowsers)) {
     addFontStylesheetLink(plugin_data.fullCSSFileModern);
+    loadFullFontsImmediately();
   } else {
     addFontStylesheetLink(plugin_data.fullCSSFileBasic);
+    loadFullFontsProgressively();
   }
-  loadFullFonts();
 }
diff --git a/kolibri/core/assets/src/views/language-switcher/language-names.scss b/kolibri/core/assets/src/views/language-switcher/language-names.scss
@@ -9,6 +9,6 @@
   .full-fonts-loaded & {
     // Unlike in the 'font-family-noto' mixin, here 'noto-full' has the lowest priority
     // to prevent downloading full font files simply to display a single language name.
-    font-family: 'noto-subset', 'noto-common', 'noto-full', sans-serif;
+    font-family: 'noto-common', 'noto-subset', 'noto-full', sans-serif;
   }
 }
diff --git a/kolibri/core/kolibri_plugin.py b/kolibri/core/kolibri_plugin.py
@@ -185,9 +185,15 @@ def language_font_file_tags(self):
         common_file = static("assets/fonts/noto-common.css")
         subset_file = static("assets/fonts/noto-subset.{}.css".format(language_code))
         return [
+            '<link type="text/css" href="{common_css_file}?v={version}" rel="preload" as="style"/>'.format(
+                common_css_file=common_file, version=kolibri.__version__
+            ),
             '<link type="text/css" href="{common_css_file}?v={version}" rel="stylesheet"/>'.format(
                 common_css_file=common_file, version=kolibri.__version__
             ),
+            '<link type="text/css" href="{common_css_file}?v={version}" rel="preload" as="style"/>'.format(
+                common_css_file=subset_file, version=kolibri.__version__
+            ),
             '<link type="text/css" href="{subset_css_file}?v={version}" rel="stylesheet"/>'.format(
                 subset_css_file=subset_file, version=kolibri.__version__
             ),

diff --git a/kolibri/core/static/assets/fonts/noto-common.css b/kolibri/core/static/assets/fonts/noto-common.css
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSans.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSans.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSans.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSans.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansAdlam.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansAdlam.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansAdlam.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansAdlam.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansAdlamUnjoined.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansAdlamUnjoined.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansAdlamUnjoined.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansAdlamUnjoined.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansArabic.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansArabic.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansArabic.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansArabic.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansArmenian.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansArmenian.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansArmenian.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansArmenian.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansBalinese.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansBalinese.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansBalinese.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansBalinese.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansBamum.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansBamum.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansBamum.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansBamum.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansBengali.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansBengali.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansBengali.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansBengali.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansCanadianAboriginal.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansCanadianAboriginal.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansCanadianAboriginal.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansCanadianAboriginal.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansCham.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansCham.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansCham.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansCham.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansCherokee.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansCherokee.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansCherokee.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansCherokee.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansDevanagari.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansDevanagari.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansDevanagari.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansDevanagari.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansEthiopic.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansEthiopic.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansEthiopic.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansEthiopic.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansGeorgian.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansGeorgian.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansGeorgian.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansGeorgian.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansGujarati.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansGujarati.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansGujarati.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansGujarati.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansGunjalaGondi.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansGunjalaGondi.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansGunjalaGondi.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansGunjalaGondi.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansGurmukhi.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansGurmukhi.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansGurmukhi.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansGurmukhi.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansHanifiRohingya.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansHanifiRohingya.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansHanifiRohingya.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansHanifiRohingya.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansHebrew.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansHebrew.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansHebrew.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansHebrew.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansJavanese.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansJavanese.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansJavanese.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansJavanese.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansKannada.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansKannada.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansKannada.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansKannada.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansKayahLi.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansKayahLi.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansKayahLi.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansKayahLi.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansKhmer.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansKhmer.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansKhmer.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansKhmer.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansLao.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansLao.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansLao.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansLao.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansLisu.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansLisu.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansLisu.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansLisu.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansMalayalam.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansMalayalam.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansMalayalam.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansMalayalam.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansMedefaidrin.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansMedefaidrin.400.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansMedefaidrin.700.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansMedefaidrin.700.woff
diff --git a/kolibri/core/static/assets/fonts/noto-full.NotoSansMeeteiMayek.400.woff b/kolibri/core/static/assets/fonts/noto-full.NotoSansMeeteiMayek.400.woff