Issue #3216489 by mherchel, dungahk, andy-blum, Indrajith KB, larowlan:...

Issue #3216489 by mherchel, dungahk, andy-blum, Indrajith KB, larowlan: Olivero font preload does not work when the site has a base path

core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroMiscTest.js

+const preloadFontPaths = [
+  'core/themes/olivero/fonts/metropolis/Metropolis-Regular.woff2',
+  'core/themes/olivero/fonts/metropolis/Metropolis-SemiBold.woff2',
+  'core/themes/olivero/fonts/metropolis/Metropolis-Bold.woff2',
+  'core/themes/olivero/fonts/lora/lora-v14-latin-regular.woff2',
+];
+
+module.exports = {
+  '@tags': ['core', 'olivero'],
+  before(browser) {
+    browser.drupalInstall({
+      setupFile:
+        'core/tests/Drupal/TestSite/TestSiteOliveroInstallTestScript.php',
+      installProfile: 'minimal',
+    });
+  },
+  after(browser) {
+    browser.drupalUninstall();
+  },
+  'Verify font loading': (browser) => {
+    browser
+      .drupalRelativeURL('/')
+      .waitForElementVisible('body')
+      // Check that <link rel="preload"> tags properly reference font.
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (preloadFontPaths) {
+          const basePath = drupalSettings.path.baseUrl;
+          let selectorsExist = true;
+          preloadFontPaths.forEach((path) => {
+            if (!document.head.querySelector(`[href="${basePath + path}"]`)) {
+              selectorsExist = false;
+            }
+          });
+
+          return selectorsExist;
+        },
+        [preloadFontPaths],
+        (result) => {
+          browser.assert.ok(
+            result.value,
+            'Check that <link rel="preload"> tags properly reference font.',
+          );
+        },
+      )
+      // Check that the CSS @font-face declaration has loaded the font.
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function () {
+          document.fonts.load('16px metropolis');
+          document.fonts.load('16px Lora');
+          return (
+            document.fonts.check('16px metropolis') &&
+            document.fonts.check('16px Lora')
+          );
+        },
+        [],
+        (result) => {
+          browser.assert.ok(
+            result.value,
+            'Check that the CSS @font-face declaration has loaded the font.',
+          );
+        },
+      );
+  },
+};

core/themes/olivero/olivero.theme

@@ -22,9 +22,8 @@ function olivero_preprocess_html(&$variables) {
     $variables['attributes']['class'][] = 'is-always-mobile-nav';
   }
 
-  // So fonts can be preloaded from base theme in the event Olivero is used as a
-  // subtheme.
-  $variables['olivero_path'] = \Drupal::service('extension.list.theme')->getPath('olivero');
+  // So fonts can be preloaded from base theme in the event Olivero is used as a subtheme.
+  $variables['olivero_path'] = \Drupal::request()->getBasePath() . '/' . \Drupal::service('extension.list.theme')->getPath('olivero');
 
   $query_string = \Drupal::state()->get('system.css_js_query_string') ?: '0';
 
@@ -36,7 +35,7 @@ function olivero_preprocess_html(&$variables) {
     '#tag' => 'link',
     '#attributes' => [
       'rel' => 'stylesheet',
-      'href' => '/' . $variables['olivero_path'] . '/css/components/navigation/nav-primary-no-js.css?' . $query_string,
+      'href' => $variables['olivero_path'] . '/css/components/navigation/nav-primary-no-js.css?' . $query_string,
     ],
   ];
 }

core/themes/olivero/templates/includes/preload.twig

@@ -8,7 +8,7 @@
  */
 #}
 
-<link rel="preload" href="/{{ olivero_path }}/fonts/metropolis/Metropolis-Regular.woff2" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="/{{ olivero_path }}/fonts/metropolis/Metropolis-SemiBold.woff2" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="/{{ olivero_path }}/fonts/metropolis/Metropolis-Bold.woff2" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="/{{ olivero_path }}/fonts/lora/lora-v14-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-Regular.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-SemiBold.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-Bold.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ olivero_path }}/fonts/lora/lora-v14-latin-regular.woff2" as="font" type="font/woff2" crossorigin>