I actually just prefer using the system fonts. Though I fully understand there may be unique situations where true web design mandates using particular fonts styles.
My preference comes from my old age and my desire to simply read what I came to see. Not be entertained by the looks or function of a web page. Besides if it loads too slowly I won’t stay long enough to read the sites content anyway. System fonts are fast because there is absolutely nothing to load.
However, to each their own.
@Norm, thanks for under promising and over delivering as always!
While testing out font-display:swap; in the Beta today, I was not seeing any improvement in Google’s Page Speed Insights with regard to the fonts it is flagging. The reason it seems is because I was doing the intuitive thing – changing all Classes in Blocs where a flagged font was used. That doesn’t work, sadly! I am instead forced to hack style.css by hand after exporting from Blocs to make sure that font-display:swap; is added to the main @font-face style at the top of style.css.
So unless I am missing something here, adding SWAP in the Blocs UI (within individual Classes) won’t do anything good at all for Google Page Speed Insights. (Somebody please prove me wrong!)
I would encourage all of you to test this for yourselves:
Test one of your web pages where a custom font (“Local Web Fonts” in Font Manager) is used in Google Page Speed Insights.
When that test is finished, scroll down and look for " Ensure text remains visible during webfont load " and then expand it and note the fonts mentioned. You can’t do anything about Font Awesome, unfortunately, but any other fonts you can.
Find the Class or Classes where that flagged font is used on your page and change those Classes by adding Font Display: Swap in the Typography section of the Class Editor.
Export your site.
Swap out style.css on your server.
Retest in Google Page Speed Insights. Note there is no change! Ack!
Edit style.css in your favorite text editor and locate the parent @font-face style. Just before the closing “}” bracket, add this: font-display:swap;
Save and swap that newly saved style.css with the one on your server.
Retest in Page Speed Insights and the font in question will no longer be flagged.
So the question now becomes, how do we edit the parent @font-face style in Blocs without having to resort to a hack of style.css every time we export?
@Norm
I found the fix here for Font Awesome only. Just make sure Blocs uses Font Awesome 5.13 instead of the current 5.12. (5.12 generates font-display:auto; while 5.13 generates font-display:block; )
I just did this with success:
Edited all.min.css to change the 3 instances of font-display:auto; to font-display:block;
Edited style.css to add font-display:swap; wherever my flagged custom fonts were used inside their parent @font-face code blocks.
Retested in Google Page Speed Insights and found that " Ensure text remains visible during webfont load " no longer displays at all, boosting my score as a result.
Updating all.min.css to version 5.13 is drop-dead easy, but allowing us to edit @font-face within Blocs, rather than be forced to hack style.css, is the big problem. But I don’t think we need the flexibility to edit that ourselves. So long as @font-face for all our custom, locally added fonts has font-display:swap; at the end, we’re good to go.
I tried to export the project to the same location.
When I choose “Replace” I got a warning that this would delete the current project file.
Is it a bug or a feature?
Personally I never had problems as the export creates a folder and the “replacement question” makes sense to me.
The blocs file has it´s own symbol and so I was never confused.
Hope I could explain it well from my point of view (as a German my english ight be not very clear sometines).
@Bootsie I would keep the project file and resources well away from the export folder. It’s much safer and avoids confusion. For exports I maintain a folder called Blocs Exported that then contains sub folders for every exported project. All active project work and resources are kept in a different area of the computer.
I have a main client job folder, within this the Blocs file, optimised files and working files, then a folder for the html output. It’s only this html output folder it affects isn’t it when it’s specified as the output folder? Always been that way. Makes sense to me!
So happy about the Ecommerce interactions! Quick question though…Would Buttons classes for Ecommerce links be overwritten in the Final Build? It looks like Paddle’s default style is taken over in this beta.