Material Icons (Google Font) - Glitch on Page Load

Design help General
1

I have installed Material Icons and placed some on the page.

When my page loads you can see the text convert to the icon which is annoying. If you watch the magnifying glass - you’ll see the word ‘search’ for a brief moment.
GIF Preview

I found this post:
Flash of unstyled text - fallback fonts loads initially then switches to google font

I added that CSS to my website and it had no effect on the glitch.

Any ideas on how to overcome this? Should I bin Material Icons?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Webflow icons – Everything you need to know.
please follow these link it is very helpful. You just download the Google font Go into project Settings > Fonts> Custom Fonts> Upload.

3

I’m asking about the glitch on page load, not how to install them (which I’ve already done).
Please read the question before replying.

4

I mean your way of installing the font was not corrected

5

But how if the icons are displaying correctly on the page (when I choose my uploaded font) - and I can choose any icon from the library?

image
image603×688 48.1 KB

7

Can you please explain how you added the Google Fonts to your project?

8

image
image840×266 16.3 KB

Should I change the display swap?

9

Ok. I know the problem now. I downloaded the library from Github and added them as a Custom Font. When using Webflow’s own Google Font drop-down - they seem to work with no glitch.

Thank you.

10

yes, that I was trying to say.