Fonts: consider to set font-display: block

[bpasero]

As far as I know, we use custom fonts in 3 areas:

• our Codicon set
• extension contributed file icons
• extension contributed product icons

I often see the workbench appear similar to this because fonts were not loaded yet and the browser fallsback to a standard font that doesn't include the used characters, as such glyphs appear:

With font-display: block the browser will not use any fallback and will simply refuse to show the font until loaded (for up to 3s I think):

More info on the available choices are in this great article:

(credits: https://sia.codes/posts/making-google-fonts-faster/)

The following locations in code are imho impacted:

• productIconThemeData.ts
• fileIconThemeData
• iconStyleSheet.ts
• contextView.ts
• codicon.css

I realise that this might be a controversal change, so maybe alternatives can be discussed here as well. One alternative would be to try to load the fonts in parallel to the workbench loading to prevent the flicker alltogether,

[isidorn]

I prefer not showing anything than the current empty squares which look like rendering glitches and are disturbing.

[aeschli]

Makes sense to me. I'll make the change.

[aeschli]

@bpasero Thanks for the research!
If you have any tricks to get to see the placeholder boxes as long as in your screencasts, please add that for the verifier.

[bpasero]

Thanks!

Yeah I cheated in my demo: I added code to specifically slow down the loading of ttf and woff. However, it should be relatively easy to be reproducible e.g. in a incognito browser session (where cache is not hit) and/or over a slow network connection.

[bpasero]

I just noticed how file icons where still suffering from this and realised that font-display can only be set on @font-face and not anywhere else. As such, this rule:

vscode/src/vs/workbench/services/themes/browser/fileIconThemeData.ts

Line 348 in c8209af

cssRules.push(`.show-file-icons .file-icon::before, .show-file-icons .folder-icon::before, .show-file-icons .rootfolder-icon::before { font-family: '${fonts[0].id}'; font-size: ${fonts[0].size || '150%'}; font-display: block; }`);

Needs to move, I guess into here:

vscode/src/vs/workbench/services/themes/browser/fileIconThemeData.ts

Line 346 in c8209af

cssRules.push(`@font-face { src: ${src}; font-family: '${font.id}'; font-weight: ${font.weight}; font-style: ${font.style}; }`);

[aeschli]

Oh, yes, my bad. I'll make a PR.

[miguelsolorio]

@aeschli I'll update this in the main codicons repo as well https://github.com/microsoft/vscode-codicons/blob/main/src/template/styles.hbs

[rzhao271]

I found the perfect opportunity to verify this issue: I had Electron build in the background.