CODEWITHSUNDEEP
cssfrontendgoogle-font-api
Aniket Pradhan
Aniket Pradhan

Reputation: 45

Icon button show text at initial rendering before loading - google fonts

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

<span class="material-symbols-outlined">
delete
</span>

enter image description here

Initial phase its showing raw text and then after some time its display the icon, How can we fix this?

Upvotes: 2

Views: 2061

Answers (2)

Jesse Nickles
Jesse Nickles

Reputation: 1839

Append &display=swap to the end of your https://fonts.googleapis.com/... asset URL and it will tell the browser to load the icon briefly as block element until the font file is properly loaded.

At least, that was the idea a few years ago when it got popular.

Since then many devs have started using display=block instead to reduce shifting, since the default "block" period used by "swap" is often so short that it's sometimes ineffective...

More: https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

Compare font-display options: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

Upvotes: 0

BehRouz
BehRouz

Reputation: 1364

You can set display in the params, which does the same thing as CSS font-display property does.

Read more here.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=block" />

<span class="material-symbols-outlined">
delete
</span>

Upvotes: 6

Related Questions