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

Add "font-display" support #5993

Open
shimsa opened this issue Oct 25, 2018 · 21 comments

Comments

@shimsa
Copy link

commented Oct 25, 2018

Please add "font-display" support, for Custom Fonts, with possibility choosing which method to use.

https://css-tricks.com/almanac/properties/f/font-display/

@TheMangoTrain

This comment has been minimized.

Copy link

commented Nov 11, 2018

+1

1 similar comment
@PureSportswear

This comment has been minimized.

Copy link

commented Dec 31, 2018

+1

@almasdepapel

This comment has been minimized.

Copy link

commented Apr 5, 2019

Yes, this is necessary for Seo according to Google's PageSpeed, meanwhile you could provide a code, to use it with a child theme. ¿No?

@schalterDev

This comment has been minimized.

Copy link

commented Apr 8, 2019

+1

1 similar comment
@bellonig78

This comment has been minimized.

Copy link

commented May 1, 2019

+1

@alriksson

This comment has been minimized.

Copy link

commented May 12, 2019

+1 for all fonts loaded! Google fonts or whichever font is loaded.

@Rivmedia

This comment has been minimized.

Copy link

commented May 31, 2019

+1 , Shows as an issue on many lighthouse performance tests : https://developers.google.com/web/updates/2016/02/font-display

Some thoughts to help implementation : https://css-tricks.com/google-fonts-and-font-display/

@heyitsfranklin

This comment has been minimized.

Copy link

commented Jun 26, 2019

+1

Why is this still open after nearly a year? This issue is negatively affecting our scores in Google PageSpeed Insights and the fix should be relatively simple.

Anyone have a workaround?

@Kulcanhez

This comment has been minimized.

Copy link

commented Jul 4, 2019

+1

Would be nice to have from feedback from the team!

@stijnvanouplines

This comment has been minimized.

Copy link

commented Jul 12, 2019

Use this plugin to add the query parameter to Google fonts:
https://wordpress.org/plugins/swap-google-font-display/

Still +1 for native Elementor support!

@Spark3000

This comment has been minimized.

Copy link

commented Jul 16, 2019

This is crucial. Pagespeed shows 12 seconds potential saving from 2 fonts.

@kroeberk

This comment has been minimized.

Copy link

commented Jul 23, 2019

Yeah, this would be appreciated since Google Pagespeed complains about this lot.

@anakhha

This comment has been minimized.

Copy link

commented Jul 29, 2019

Is that still unresolved? Possibility would be, to connect the fonts by @font-face. But why do we have "Custom Fonts" in the Elementor? ^^

@anakhha

This comment has been minimized.

Copy link

commented Jul 29, 2019

+1

@bainternet bainternet added this to the Pro 2.7.0 milestone Aug 14, 2019

@bainternet

This comment has been minimized.

@alriksson

This comment has been minimized.

Copy link

commented Aug 22, 2019

@bainternet Can we add the same to Google fonts that elementor use? And share the php snippet to change the default value for google font to desired display support?

Will you add the same for custom icons and for default FA icon packages?

@Kulcanhez

This comment has been minimized.

Copy link

commented Aug 22, 2019

@bainternet Can we add the same to Google fonts that elementor use? And share the php snippet to change the default value for google font to desired display support?

Will you add the same for custom icons and for default FA icon packages?

That's actually a good question cause in the article it only talks about custom fonts.

@heyitsfranklin

This comment has been minimized.

Copy link

commented Aug 22, 2019

@bainternet Can we add the same to Google fonts that elementor use? And share the php snippet to change the default value for google font to desired display support?

That's impossible. The fonts and CSS for those are imported from Google servers on page load. You can only set the font-display CSS attribute at the point where you define the custom font in your CSS which Google does not do.

The only workaround, and also best practice if you're really concerned about your PageSpeed Insights score, is to store the fonts on your local server and import them from the Custom Fonts section in Elementor.

@alriksson

This comment has been minimized.

Copy link

commented Aug 22, 2019

@heyitsfranklin Google font support it themselves so I don't agree https://tppr.me/bdO9B . And elementor could do it in the core just like: https://wordpress.org/plugins/swap-google-font-display/ as well.

@jazir5

This comment has been minimized.

Copy link

commented Aug 26, 2019

@heyitsfranklin That's impossible. The fonts and CSS for those are imported from Google servers on page load. You can only set the font-display CSS attribute at the point where you define the custom font in your CSS which Google does not do.

The only workaround, and also best practice if you're really concerned about your PageSpeed Insights score, is to store the fonts on your local server and import them from the Custom Fonts section in Elementor.

--

https://wordpress.org/plugins/host-webfonts-local/

Would it be possible to do so in combination with this plugin somehow?

@heyitsfranklin

This comment has been minimized.

Copy link

commented Aug 27, 2019

@heyitsfranklin Google font support it themselves so I don't agree https://tppr.me/bdO9B . And elementor could do it in the core just like: https://wordpress.org/plugins/swap-google-font-display/ as well.

Ah yes, looks like you're right. Sorry, I wasn't aware of this.

@heyitsfranklin That's impossible. The fonts and CSS for those are imported from Google servers on page load. You can only set the font-display CSS attribute at the point where you define the custom font in your CSS which Google does not do.

The only workaround, and also best practice if you're really concerned about your PageSpeed Insights score, is to store the fonts on your local server and import them from the Custom Fonts section in Elementor.

--

https://wordpress.org/plugins/host-webfonts-local/

Would it be possible to do so in combination with this plugin somehow?

I'm not sure. I'm using Elementor Pro where the ability to import custom fonts is already built in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.