Skip to content

Use font-display: block for the Material Symbols icon font - #252

Draft
boo-code wants to merge 1 commit into
PrestaShop:developfrom
boo-code:fix/material-symbols-font-display-block-26837
Draft

boo-code wants to merge 1 commit into
PrestaShop:developfrom
boo-code:fix/material-symbols-font-display-block-26837

Conversation

@boo-code

@boo-code boo-code commented Sep 4, 2026

Copy link
Copy Markdown
Questions Answers
Description? The Material Symbols face is declared font-display: swap. Its glyphs are ligatures of their own names, so during the swap period the browser paints the fallback font, and every icon in the back office renders as the literal word - remove_red_eye, shopping_cart - until the woff2 arrives. block keeps them invisible for the block period instead, which is the standard treatment for an icon font and exactly what @eternoendless proposed when he opened the issue. Applied to the self-hosted @font-face and, for consistency, to the Google Fonts import used when the fonts are not self-hosted (&display=block).
Type? bug fix
BC breaks? no
Deprecations? no
Fixed ticket? Fixes PrestaShop/PrestaShop#26837
Sponsor company
How to test? Load the back office with a cold cache and a throttled connection. Before: the menu and every icon slot briefly show their icon names as words. After: the icon slots stay blank until the font loads, then fill in.

Confirm the PR table shape against this repo's own template at publish time.

Where the declaration actually lives, and how that was established

The core admin theme never declares it - admin-dev/themes/new-theme/scss only has @font-face for the RTL
Vazirmatn faces. Every icon rule uses font-family: var(--#{$cdk}font-family-material-icons), and $cdk
resolves to the prestakit package, i.e. this repo. Verified in three places:

prestakit 2.0.5 (installed)   scss/_imports.scss:27      font-display: swap
prestashop-ui-kit@develop     scss/_imports.scss:27      font-display: swap   (identical)
core compiled theme.css       Material Symbols Outlined";font-style:normal;font-display:swap;src:url(...)

so the value does reach production CSS, not just source.

What was NOT observed

I could not stage the transient window in a browser here: with the font served locally it loads instantly,
and I have no request-throttling or request-blocking tool. A harness with a deliberately unreachable font
did not help either - block only hides for the block period (~3s), after which it too falls back, so both
variants looked identical by the time a screenshot landed, and a width sample is identical by construction
(180px both) because the difference is paint, not layout.

So the causal chain rests on: the font is a ligature icon font (its glyph names are the rendered text),
the shipped declaration is swap, and swap paints the fallback during loading - which is precisely the
screenshot in the report. The change itself is one keyword with well-defined semantics.

Sequencing note for the core side

Fixing it here does not fix a shop by itself: core pins prestakit ^2.0.5 in
admin-dev/themes/new-theme/package.json, so a released version and a bump are needed before the back
office picks it up. Worth saying on the core issue so it is not closed prematurely.

Prior art in the thread

PrestaShop/PrestaShop#26883 ("Preload fonts in the BO") was merged in January 2022 and added webpack-font-preload-plugin;
preloading shortens the window but does not change what is painted during it, which is why @kpodemski still
saw the problem on 9.1 in March 2026.

The Material Symbols glyphs are ligatures of their own names, so while the font
is loading font-display: swap paints the fallback and every icon in the back
office renders as the literal word - remove_red_eye, shopping_cart - until the
font arrives. block keeps them invisible for the block period instead, which is
the usual treatment for an icon font.

Applied to the self-hosted face and, for consistency, to the Google Fonts import
used when the fonts are not self-hosted.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Flash of unstyled text while material icons load causes weird menu

1 participant