Ensure Text Remains Visible During Webfont Load - Question | JoomShaper

Ensure Text Remains Visible During Webfont Load

BM

Blagoja Martinovski

Helix Framework 2 years ago

Hi guys,

i'm working on getting above 90 score on pagespeed, the only thing that i cannot sort out is the "Ensure text remains visible during webfont load".

Can you please let me know where does Shaper Helix calls them so that i can add font-display: swap; for them? I've tried this in the custom css but it's not working:

@font-face {<br/> font-display: swap !important;<br/> }<br/>

the files in question are:<br/> /templates/shaper_helixultimate/fonts/fa-brands-400.woff<br/> /templates/shaper_helixultimate/fonts/fa-regular-400.woff<br/> /templates/shaper_helixultimate/fonts/fa-solid-900.woff

0
4 Answers
BM
Blagoja Martinovski
Accepted Answer
2 years ago #25684

Guys do you even read the tickets? What url to check the issue? I'm asking for location of a file, you don't need url, nor screenshot for that. I've spent the day digging trough the code to find out where is the code located. I've found it myself and it's sorted out now.

Same as on the other tickets, 5 months ago i've sent you a bug for the BCC field in the contact form addon for sp page builder (which btw you still have it in the latest version) and 3 guys change on the ticket and ask for url. It's a bug on your system, you don't need url to check the issue.

Unbeleivable.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 2 years ago #25706

Hi there,

This fonts are comes from fontawesome css file. Which is included inside the index.php file.

https://prnt.sc/1ebli44

https://prnt.sc/1eblpcf

-Thanks

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 2 years ago #25623

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Will you please share your site URL to check the issue?

-Thanks

0
BM
Blagoja Martinovski
Accepted Answer
2 years ago #25616

Found it, anybody that has the problem on page speed, you need to edit templates/shaper_helixultimate/css/font-awesome.min.css, at the very bottom you'll find these:

@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../fonts/fa-brands-400.woff) format("woff"),url(../fonts/fa-brands-400.ttf) format("truetype"),font-display: swap}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(../fonts/fa-regular-400.woff) format("woff"),url(../fonts/fa-regular-400.ttf) format("truetype"),font-display: swap}.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(../fonts/fa-solid-900.woff) format("woff"),url(../fonts/fa-solid-900.ttf) format("truetype"),font-display: swap}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}

change the font-display:auto (3 occurances)to font-display: swap and you are good to go :)

0