"Ensure text remain visible during webfont load"

I Need Help
1

Hi everyone,

when I test my website speed using Google PageSpeed Insights I get this message: “Ensure text remain visible during webfont load”. How can I solve this in order to get a better score?

Thanks.

1 Like
2

This maybe useful?

3

I followed the tutorial but I get the same message regarding this URLs…

/fonts/et-line.woff
/fonts/fontawesome-webfont.woff2?v=4.7.0

4

add font-display: swap; to your font stylesheet

5

@PeteSharp & @Stewie_Griffin,

I agree that adding font-display: swap; inside @font-face within the Blocs-generated “style.css” file is critically important, but Blocs controls that. It’s too fiddly and inconvenient to export and then manually hack the style.css file in something like TextWrangler. I therefore have 2 questions for you gentlemen:

  1. Why doesn’t Blocs add that important “swap” line automatically for us?
  2. How do we add the “swap” line into every instance of @font-face in “style.css” without having to Export and then use a text editor?

Thanks!

6

Hi! I do this manually all the time! I check the site once exported with website auditor and lighthouse and I do the fixing manually! I think the best would be to ask @Norm and maybe he could add it on blocs as at the moment I don’t think you can do it with the app but maybe Im wrong @PeteSharp knows better!

7

I honestly do NOT want to hand-edit exported files, so I look forward to the magic in-Blocs solution from @PeteSharp! :slight_smile:

8

Talking about fonts… did you manage you find the font fa on the css? Cant find it haha

9

Never mind! Got it! Hope @Norm will come with an on app solution for this soon :smiley:

1 Like
10

And what would happen if someone adds this additionally in Blocs:

@font-face {
	font-display: swap;
}
11

I am no expert on CSS, but I am guess it will not work. I have 3 separate instances of @font-face in my style.css file. If you could just type @font-face{...somthing...} into Page Settings Code, it wouldn’t be applied to all 3 instances, I don’t think. For example, if you did that with an “src” URL (commonly used in font-face, that same URL would not be (nor should it be) applied to every instance of font-face. So I don’t think it will work.

Seems @PeteSharp is pretty busy moderating because he hasn’t commented in this thread. Or maybe he’s quiet simply because he just doesn’t know. :frowning:

12

It is :beer: o’clock… well its only 2:20pm but its flippen hot here at present. :hot_pepper:

Might shock you, but I have paid work to complete! not to mention all the other things I am working on and trying to get out the door.

If I don’t know the answer, and its going to take some research, its not always a priority.

4 Likes
13

Thank you for the explanation, Pete!

When folks don’t reply, the reasons behind the lack of replies are always left to speculation. Thanks for eliminating the guessing.

I may prod you now and then to see if you have a spare moment to consider this topic. My follow-ups irk some folks, but if there’s a positive result in the end that benefits many, we can all smile and say it was worth it!

I’ll now let you get back to that image
er… work! :wink:

14

Please don’t.

15

Ok, I will respect your space. But should you ever need to follow-up with me on a matter, feel free to prod! :slight_smile:

16

Come on @PeteSharp it’s one of the most helpful guy on the forum but he also has a life :slight_smile:
I have been digging and I don’t see how this could be done inside blocs , there are a few fonts asking for the tag, and one is on the all.min.css stylesheet. I think the best way would be to send an email to @Norm and maybe he could add this feature in the future :smiley:

1 Like
17

I actually did that yesterday. :slight_smile: