Skip to content
Snippets Groups Projects
Unverified Commit c12933ff authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

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
parent df65e9fb
No related branches found
No related tags found
No related merge requests found
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.',
);
},
);
},
};
......@@ -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,
],
];
}
......
......@@ -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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment