Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

βœ… 🐞 Bug Report: Global fonts always calls fonts.googleapis.com #16023

Closed
5 tasks done
colmtroy opened this issue Aug 17, 2021 · 5 comments
Closed
5 tasks done
Labels
bug Indicates a bug with one or multiple components. compatibility/assets Indicates a compatibility problem with scripts or CSS. compatibility/3rd-party Indicates a compatibility problem with a 3rd-party plugin or theme. mod* [Temp.] For internal use only. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. status/merged Indicates when a Pull Request has been merged to a Release. type/global-styles Indicates when a topic is related to Global Styles. type/performance Indicates when a topic is related to Performance. type/privacy Indicates when a topic is related to user Privacy.

Comments

@colmtroy
Copy link

colmtroy commented Aug 17, 2021

Prerequisites

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • The issue still exists against the latest stable version of Elementor.

Description

The default elementor_scheme_typography controls cause an unnecessary fonts.googleapis.com http request that has speed and performance implications and cannot be set to be switched off by default no matter what the user does.

Goal: Complete removal of all http requests to Google font servers.

Steps to reproduce

1.) Clean install of Elementor (3.4.0), WordPress (5.8). Default theme: Twenty Twenty-One
2.) Disable Default Colors and Fonts in Elementor -> Settings
3.) Create new Page in Pages -> Add new
4.) Add a heading and a text editor. Observe that typography is set to "Default"

5.) Publish page and open it.
6.) Open network tab in Google Chrome dev tools and search for "fonts.googleapis.com". Observe that a completely unnecessary http request is sent to fonts.googleapis.com

The root cause of this issue is the Site Settings -> Global Fonts trigger Roboto, Robot Slab et. al. to be called even though we disabled Default fonts in Step 2 above.

The elementor_scheme_typography DB option looks like this despite Elementor fonts being disabled globally.

This additional http request is very expensive for those of us conducting webperf optimization. The only way to avoid it is to manually update Site Settings -> Global Fonts and set it to use "Default" too manually, but this is a problem for lots of reasons:
1.) It's not at all clear that the user needs to do this to avoid the fonts.googleapis.com http request
2.) As far as the user is concerned, they already completed this step in Step 2 above.
3.) The only way to make this change is by first creating a page - so it's not at all obvious to the user that they need to update a global typography scheme option at a page level editor.

I would strongly recommend 2 things:
a.) Update the elementor_scheme_typography DB option to remove the Elementor Typography scheme default fonts when a user completes Step 2 above.
b.) Allow theme authors/plugin devs to set/filter elementor_scheme_typography so as to set this upon installation of a theme.

Isolating the problem

  • This bug happens with only Elementor plugin active (and Elementor Pro).
  • This bug happens with a default WordPress theme active.
  • I can reproduce this bug consistently using the steps above.

Environment

System Info ```

== Server Environment ==
Operating System: Darwin
Software: nginx/1.16.0
MySQL version: MySQL Community Server - GPL v8.0.16
PHP Version: 7.3.5
PHP Max Input Vars: 4000
PHP Max Post Size: 1000M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 5.8
Site URL: http://localhost:10003
Home URL: http://localhost:10003
WP Multisite: No
Max Upload Size: 300 MB
Memory limit: 256M
Permalink Structure: Plain
Language: en-US
Timezone: 0
Debug Mode: Active

== Theme ==
Name: Twenty Twenty-One
Version: 1.4
Author: the WordPress team
Child Theme: No

== User ==
Role: administrator
WP Profile lang: en_US
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

== Active Plugins ==
Elementor
Version: 3.4.0
Author: Elementor.com

== Elementor - Compatibility Tag ==

== Elements Usage ==

wp-page : 2
	heading : 1
	text-editor : 1

== Log ==

</details>
@black-eye
Copy link

black-eye commented Aug 17, 2021

+1
All this Roboto default stuff is a huge pain! The other side effect is that when you have the fonts defined via a theme (and not via Elementor Global Fonts), reseting (and reselecting) any widget's font setting leads to selecting Roboto (even though it's never used on the site at all). The oly way, how to get rid of it is to redefine the theme's font setting in Elementor (by setting it either to the same font or to "default").

This step is really unnecessary, the default option should be "default" and not Roboto. At least when default fonts are disabled.

@oliveandlake
Copy link

oliveandlake commented Sep 1, 2021

I notice nobody from Elementor has eyes on this thread! @shilo-ey? It seems to be around since 2018 - #4075

I can recreate this issue too.

I have only Hello theme, E and E Pro installed. No other plugins.

Go to site settings, change all to Open Sans.

Regenerate CSS.

Still, Roboto is there. No header, no footer. Just one H1 Element which is Open Sans. There is not roboto anywhere, but it's in the GT Metrix Waterfall. I've disabled all default fonts. I can be 100% sure that there is no Roboto anywhere! :)

image

@sermalefico
Copy link

Imposibel to remove this roboto reference font. :(

@murshed
Copy link

murshed commented Feb 6, 2022

Any solution?

@nicholaszein nicholaszein added bug Indicates a bug with one or multiple components. compatibility/3rd-party Indicates a compatibility problem with a 3rd-party plugin or theme. type/performance Indicates when a topic is related to Performance. dependencies Pull requests that update a dependency file type/privacy Indicates when a topic is related to user Privacy. compatibility/assets Indicates a compatibility problem with scripts or CSS. type/global-styles Indicates when a topic is related to Global Styles. and removed product/beta3.10 labels Feb 13, 2023
@nicholaszein nicholaszein changed the title Global fonts always calls fonts.googleapis.com βœ”οΈ 🐞 Bug Report: Global fonts always calls fonts.googleapis.com Feb 13, 2023
@nicholaszein
Copy link
Member

nicholaszein commented Feb 13, 2023

Hello there!

We have great news! πŸ™Œ

πŸ“’ We're happy to announce that the issue you raised was resolved in Elementor v3.10! πŸ₯³

βœ… Please feel free to check it out and update your plugin to the new version!

Cheers πŸ₯‚

@elementor elementor locked and limited conversation to collaborators Feb 13, 2023
@nicholaszein nicholaszein added the status/merged Indicates when a Pull Request has been merged to a Release. label Feb 13, 2023
@nicholaszein nicholaszein added the mod* [Temp.] For internal use only. label Apr 18, 2023
@nicholaszein nicholaszein changed the title βœ”οΈ 🐞 Bug Report: Global fonts always calls fonts.googleapis.com βœ… 🐞 Bug Report: Global fonts always calls fonts.googleapis.com May 24, 2023
@nicholaszein nicholaszein added the solved Indicates that an Issue has been Solved, or a Feature Request has been Released. label May 24, 2023
@nicholaszein nicholaszein removed the dependencies Pull requests that update a dependency file label Dec 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Indicates a bug with one or multiple components. compatibility/assets Indicates a compatibility problem with scripts or CSS. compatibility/3rd-party Indicates a compatibility problem with a 3rd-party plugin or theme. mod* [Temp.] For internal use only. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. status/merged Indicates when a Pull Request has been merged to a Release. type/global-styles Indicates when a topic is related to Global Styles. type/performance Indicates when a topic is related to Performance. type/privacy Indicates when a topic is related to user Privacy.
Projects
None yet
Development

No branches or pull requests

6 participants