Title: Google Font – can’t do it
Last modified: March 27, 2020

---

# Google Font – can’t do it

 *  Resolved [kreativito](https://wordpress.org/support/users/kreativito/)
 * (@kreativito)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/)
 * I am very frustrated today.. I can’t find any step by step video tutorial that
   shows me exactly how I have to add the .css code for the google fonts.
 * Short explanation of my current issue:
    [https://youtu.be/twvLkbm5Ymo](https://youtu.be/twvLkbm5Ymo)
 * thank you so much for any little help!

Viewing 14 replies - 1 through 14 (of 14 total)

 *  [Anton Vanyukov](https://wordpress.org/support/users/vanyukov/)
 * (@vanyukov)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12599836)
 * Hi [@kreativito](https://wordpress.org/support/users/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
 *  Plugin Support [Imran – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support9/)
 * (@wpmudev-support9)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12601068)
 * Hello [@kreativito](https://wordpress.org/support/users/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 CS**S, or to your [child theme](https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/)
   style.css file.
 * Please see this explanation:
    [https://web.dev/font-display/](https://web.dev/font-display/)
   [https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/](https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/)
   [https://css-tricks.com/google-fonts-and-font-display/](https://css-tricks.com/google-fonts-and-font-display/)
 * Hope this helps!
 * Cheers,
    Nastia
 *  [geagichi](https://wordpress.org/support/users/geagichi/)
 * (@geagichi)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12637873)
 * Hello [@nastia](https://wordpress.org/support/users/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.
 *  [Anton Vanyukov](https://wordpress.org/support/users/vanyukov/)
 * (@vanyukov)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12637890)
 * [@geagichi](https://wordpress.org/support/users/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
 *  [geagichi](https://wordpress.org/support/users/geagichi/)
 * (@geagichi)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12640214)
 * [@anton](https://wordpress.org/support/users/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.
 *  Plugin Support [Imran – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support9/)
 * (@wpmudev-support9)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12655848)
 * Hello [@geagichi](https://wordpress.org/support/users/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](https://developers.google.com/speed/pagespeed/insights/).
   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
 *  [geagichi](https://wordpress.org/support/users/geagichi/)
 * (@geagichi)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12656092)
 * hello [@nastia](https://wordpress.org/support/users/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?
 *  Plugin Support [Dimitris – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support6/)
 * (@wpmudev-support6)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12661136)
 * Hello [@geagichi](https://wordpress.org/support/users/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/](https://developers.elementor.com/elementor-pro-2-7-custom-fonts-font-display-support/)
 * Warm regards,
    Dimitris
 *  [geagichi](https://wordpress.org/support/users/geagichi/)
 * (@geagichi)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12661470)
 * Hi [@dimitris](https://wordpress.org/support/users/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 6 years, 1 month ago by [geagichi](https://wordpress.org/support/users/geagichi/).
    -  This reply was modified 6 years, 1 month ago by [geagichi](https://wordpress.org/support/users/geagichi/).
 *  Plugin Support [Imran – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support9/)
 * (@wpmudev-support9)
 * [6 years ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12851418)
 * Hello [@geagichi](https://wordpress.org/support/users/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/](https://developers.elementor.com/elementor-pro-2-7-custom-fonts-font-display-support/)
 * Please advise,
 * Kind regards,
    Nastia
 *  [geagichi](https://wordpress.org/support/users/geagichi/)
 * (@geagichi)
 * [6 years ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12852504)
 * Hi [@nastia](https://wordpress.org/support/users/nastia/) and welcome back. After
   reading the documentation page about Elementor I see it doesn’t say where to 
   add that piece of code.
 *  Plugin Support [Imran – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support9/)
 * (@wpmudev-support9)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12889467)
 * Hello [@geagichi](https://wordpress.org/support/users/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/](https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/)
 * Kind regards,
    Nastia
 *  Plugin Support [Imran – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support9/)
 * (@wpmudev-support9)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12918836)
 * Hello [@geagichi](https://wordpress.org/support/users/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
 *  [geagichi](https://wordpress.org/support/users/geagichi/)
 * (@geagichi)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12928431)
 * hello [@nastia](https://wordpress.org/support/users/nastia/) and thank you for
   your reply, I don’t have a child theme.

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Google Font – can’t do it’ is closed to new replies.

 * ![](https://ps.w.org/hummingbird-performance/assets/icon-256x256.gif?rev=2633221)
 * [Hummingbird Performance - Cache & Page Speed Optimization for Core Web Vitals | Critical CSS | Minify CSS | Defer CSS Javascript | CDN](https://wordpress.org/plugins/hummingbird-performance/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/hummingbird-performance/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/hummingbird-performance/)
 * [Active Topics](https://wordpress.org/support/plugin/hummingbird-performance/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/hummingbird-performance/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/hummingbird-performance/reviews/)

 * 14 replies
 * 5 participants
 * Last reply from: [geagichi](https://wordpress.org/support/users/geagichi/)
 * Last activity: [5 years, 11 months ago](https://wordpress.org/support/topic/google-font-cant-do-it/#post-12928431)
 * Status: resolved