[FONT] Ensure text remains visible during webfont load

[mmgil]

Guidelines for posting a new issue

In PageSpeed insights i receive the following message: Ensure text remains visible during webfont load.

How to FIX this situation?

• Please replicate your issue with this CodeSandBox and provide a link to it along with the issue description

[Ricardo-Bonin]

I have the same problem!! !

[Ricardo-Bonin]

I add the font-display: swap in font-face of all slick-theme documents in node_modules and solved it by running in localhost

[akiran]

@mmgil @Ricardo-Bonin You can override the css from slick-carousel by adding custom CSS in your projects

react-slick doesn't maintain CSS. You have to get it from slick-carousel and customize it. So closing this issue

[nitvirus]

facing same issue, please advise a way forwad, if CSS is not maintained, please remove the font dependency

[dharanchit]

Anything on this? How do i resolve this?

[Ricardo-Bonin]

Do not. I tried everything and I couldn't solve it here!

[dharanchit]

@Ricardo-Bonin any way around this?

[Ricardo-Bonin]

The solution would be for them to add the font-display: swap; to @font-face straight in the default css! I made the suggestion but they didn't accept it!

[mrdkzm]

You should override to your slider button fonts with css.

.slick-next:before, .slick-prev:before{ font-family: (Your project font or anything what you want) !important; font-display: swap; }