Conversation
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.blockkeeps 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-faceand, for consistency, to the Google Fonts import used when the fonts are not self-hosted (&display=block).Where the declaration actually lives, and how that was established
The core admin theme never declares it -
admin-dev/themes/new-theme/scssonly has@font-facefor the RTLVazirmatn faces. Every icon rule uses
font-family: var(--#{$cdk}font-family-material-icons), and$cdkresolves to the
prestakitpackage, i.e. this repo. Verified in three places: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 -
blockonly hides for the block period (~3s), after which it too falls back, so bothvariants 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, andswappaints the fallback during loading - which is precisely thescreenshot 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.5inadmin-dev/themes/new-theme/package.json, so a released version and a bump are needed before the backoffice 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.