Google Font – can’t do it

Hi @kreativito,

This depends on the theme. Some have built-in options for that (for example, Avada). If a theme doesn’t have such an option, you will need to create a child theme and overwrite the fonts in the CSS file, or functions.php file, or they could be loaded elsewhere. Unfortunately, there’s no universal solution for this. I can only recommend asking the theme developers for help with finding the fonts.

Best regards,
Anton

Hello @kreativito

I trust you are doing well!

To improve the score for a recommendation “Ensure text remains visible during webfont load”, font-display: swap; needs to be added to the fonts style that you are using.

A font is usually is imported with a similar CSS:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
}

You can re-add the CSS by including font-display: swap;, to Appearance > Customize > Additional CSS, or to your child theme style.css file.

Please see this explanation:
https://web.dev/font-display/
https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/
https://css-tricks.com/google-fonts-and-font-display/

Hope this helps!

Cheers,
Nastia

Hello @nastia you explained a shit, we read all the google related things that you paste right here. Tell us exactly what to do when we have such troubles with our fonts, what exactly we must do where to go what to add. What fonts my website it uses because this Hummingbird plugin messed up all the fonts.

@geagichi,

Please refrain from using foul language and be respectful to other members.

Hummingbird does not modify your fonts, but only provides recommendations based on the PageSpeed reports. Above is an example of where and exactly what you need to do to change the font-display property.

Best regards,
Anton

@anton,

Sorry for using “foul language” but those fouls doesn’t know what to modify if you don’t tell them exactly. And this plugin modify the path of the fonts and the web site have problems caused by minifying the css scripts so be respectful to us and tell us what to do, step by step because “font-display: swap;” won’t help.

Hello @geagichi

I hope you are doing well!

In these forums, we are trying to help as much as we can, and I’m sorry to see your reply like that.

Additional to what Anton has mentioned, the Hummingbird’s Performance report recommendations are coming from the Google Page Speed Insight. And the plugin doesn’t change the path of the fonts.

In order to make these “Ensure text remains visible during webfont load” you will need to know what google fonts are loading on your site and add font-display: swap; CSS code.

So on your site, as mentioned in the links that were shared, you need to locate the font name that you are using, and then add this CSS to your child theme style.css file:

@font-face {
  font-family: 'Your Font name';
  src: url(https://your-font-URL.woff2) format('woff2');
font-display:swap;
}

If you can’t locate it, please contact your theme’s developers so they could assist you.

Have a good day and take care!

Best wishes,
Nastia

hello @nastia thank you for your ample reply. But I do not understand a thing. I have some fonts into my web site added my WordPress and Elementor. And I find them into

styles.css -> assets -> fonts -> fontsaswome -> css -> all.css

@font-face {
font-family: ‘Font Awesome 5 Brands’;
font-style: normal;
font-weight: normal;
font-display: auto;
src: url(“../webfonts/fa-brands-400.eot”);
src: url(“../webfonts/fa-brands-400.eot?#iefix”) format(“embedded-opentype”), url(“../webfonts/fa-brands-400.woff2”) format(“woff2”), url(“../webfonts/fa-brands-400.woff”) format(“woff”), url(“../webfonts/fa-brands-400.ttf”) format(“truetype”), url(“../webfonts/fa-brands-400.svg#fontawesome”) format(“svg”); }

.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(“../webfonts/fa-regular-400.eot”);
src: url(“../webfonts/fa-regular-400.eot?#iefix”) format(“embedded-opentype”), url(“../webfonts/fa-regular-400.woff2”) format(“woff2”), url(“../webfonts/fa-regular-400.woff”) format(“woff”), url(“../webfonts/fa-regular-400.ttf”) format(“truetype”), url(“../webfonts/fa-regular-400.svg#fontawesome”) format(“svg”); }

.far {
font-family: ‘Font Awesome 5 Free’;
font-weight: 400; }
@font-face {
font-family: ‘Font Awesome 5 Free’;
font-style: normal;
font-weight: 900;
font-display: auto;
src: url(“../webfonts/fa-solid-900.eot”);
src: url(“../webfonts/fa-solid-900.eot?#iefix”) format(“embedded-opentype”), url(“../webfonts/fa-solid-900.woff2”) format(“woff2”), url(“../webfonts/fa-solid-900.woff”) format(“woff”), url(“../webfonts/fa-solid-900.ttf”) format(“truetype”), url(“../webfonts/fa-solid-900.svg#fontawesome”) format(“svg”); }

.fa,
.fas {
font-family: ‘Font Awesome 5 Free’;
font-weight: 900; }

I don’t know if those fonts are loading or not and I don’t know if that script “swap” it’s for a temporarily load then swap to those fonts or what? Can you explain please?

Hello @geagichi

“Swap” property instructs the browser to use the fallback font to display the text until the custom font has fully downloaded.
Considering Elementor though, it seems that they provided a filter recently that further assists on that part. Please have a look at the following article that also contains a little snippet that you can add in functions.php of your child theme:
https://developers.elementor.com/elementor-pro-2-7-custom-fonts-font-display-support/

Warm regards,
Dimitris

Hi @dimitris, I hope you’re doing well.

I still don’t know what to do. Can you explain? I read all what you’ve told me but I don’t know what my web site needs to load faster about the fonts? What to do? Please explain, what I have and what I must do because you copy/paste.

• This reply was modified 4 years, 7 months ago by geagichi.
• This reply was modified 4 years, 7 months ago by geagichi.

Hello @geagichi

I hope you’re doing well!

I apologize for teh delay in this thread. Please let us know if you still have this issue. If the issue is still there, have you followed the instructions from Elementor’s documentation page as Dimitris has suggested?
https://developers.elementor.com/elementor-pro-2-7-custom-fonts-font-display-support/

Please advise,

Kind regards,
Nastia

Hi @nastia and welcome back. After reading the documentation page about Elementor I see it doesn’t say where to add that piece of code.

Hello @geagichi

I hope you’re doing well!

Please add the code to fucntions.php file of your child theme and see if this will work on your site.

If you do not have a child theme, please see here how to create it:
https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

Kind regards,
Nastia

Hello @geagichi

I hope you are doing well!

We haven’t heard back from you for a while now so we’ve marked this ticket as resolved. If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

Kind regards,
Nastia

hello @nastia and thank you for your reply, I don’t have a child theme.