Staff replied Templates

Add the &display=swap parameter to the end of the Google Fonts URL:

Asked by Addington 2 years ago Last activity 2 years ago

Google Lighthouse report suggests that I Add the &display=swap parameter to the end of your Google Fonts URL: <link
href="/https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/> but i have no idea where that url is created by Helix ultimate.

9 replies

Paul Frankowski Senior Staff

2 years ago · edited

Hi Charles,

as I checked in raw Helix Ultimate template "swap" is added for all Google Fonts from Typograhy settings. We added that over a year ago. Example from real working site.

please check view-source of your site to confirm what YOU really see there.

Addington Asked this

2 years ago

Wow! I did not expect a reply on a Sunday morning!

I see:
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic&display=swap" rel="stylesheet" media="none" onload="media="all"" />
<link href="/templates/shaper_helixultimate/css/bootstrap.min.css" rel="stylesheet" />
<link href="/plugins/system/helixultimate/assets/css/system-j4.min.css" rel="stylesheet" />
<link href="/media/system/css/joomla-fontawesome.min.css?f25035" rel="stylesheet" />
<link href="/templates/shaper_helixultimate/css/template.css" rel="stylesheet" />
<link href="/templates/shaper_helixultimate/css/presets/preset1.css" rel="stylesheet" />
<link href="/templates/shaper_helixultimate/css/custom.css" rel="stylesheet" />
<link href="/components/com_sppagebuilder/assets/css/animate.min.css?981245863c383366a329259d02b8172c" rel="stylesheet" />
<link href="/components/com_sppagebuilder/assets/css/sppagebuilder.css?981245863c383366a329259d02b8172c" rel="stylesheet" />
<link href="/components/com_sppagebuilder/assets/css/magnific-popup.css" rel="stylesheet

Addington Asked this

2 years ago

Did I miss it out?
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic&display=swap" rel="stylesheet" media="none" onload="media="all"" />
<link href="/templates/shaper_helixultimate/css/bootstrap.min.css" rel="stylesheet" />

Paul Frankowski Senior Staff

2 years ago

is what I see even without glasses ;)

BTW

Why you choosen "cyrillic" subset ?? if you are Latin in UK !

Addington Asked this

2 years ago

and i have just noticed &display=swap. This is odd. Google lighthouse says I don't use it.

Paul Frankowski Senior Staff

2 years ago

Unfortunately, I have no control over what Google writes in the reports, but as we both see there is display=swap for Roboto.

Paul Frankowski Senior Staff

2 years ago · edited

I have one theory, but I have to talk with developer tomorrow...

becuase fonts.google Generator uses now:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;500&display=swap" rel="stylesheet">

just "&" after numbers, they removed subset

Addington Asked this

2 years ago

Thanks, I appreciate it. Cyrillic? No idea - it has probably been there since the beginning and I knew nothing at all.

Paul Frankowski Senior Staff

2 years ago

can be changed in Typography settings, but I cut it off in below plugin.

Paul Frankowski Senior Staff

2 years ago · edited

Are You Brave Enough?

Not perfect, but should be better than default code (Free download, install): https://ufile.io/x8y1avsb

Unoffcial change. I have to think harder with our developer next week also for my projects.