Load saved Google Fonts in Gutenberg Editor

Codestar Support Forum » WordPress Plugins » Codestar Framework

Load saved Google Fonts in Gutenberg Editor

stv11c

Hi, what is the best way to load the saved Google fonts (within the Admin theme options) to load within the Gutenberg editor?

Regards
Stephan

Posted 2 years ago #
stv11c
Looking into further, it may be that the google font scripts are only loaded on the frontend from within file setup.class.php on line 74.
```
add_action( 'wp_enqueue_scripts', array( 'CSF', 'add_typography_enqueue_styles' ), 80 );CopyCopied!
```
I tried copy/paste that line and adding to hook 'admin_enqueue_scripts' but still wasn't working.

Any ideas?
Posted 2 years ago #

Codestar
Admin

Hi,

Hmm, Also you need to add admin_enqueue_scripts here:

// codestar-framework/classes/abstract.class.php Line 20
add_action( 'wp_enqueue_scripts', array( &$this, 'collect_output_css_and_typography' ), 10 );
add_action( 'admin_enqueue_scripts', array( &$this, 'collect_output_css_and_typography' ), 10 );

// codestar-framework/classes/setup.class.php Line 74
add_action( 'wp_enqueue_scripts', array( 'CSF', 'add_typography_enqueue_styles' ), 80 );
add_action( 'admin_enqueue_scripts', array( 'CSF', 'add_typography_enqueue_styles' ), 80 );CopyCopied!

But, I am not sure how to we can do it without touch any source framework files.

Regards, Codestar

Posted 2 years ago #

stv11c
Thank you, that worked!

Since the Gutenberg editor is visual, there is a good reason to load the saved theme option fonts within the Editor.

Maybe another Admin Argument such as
```
'enqueue_editor_webfont' => trueCopyCopied!
```
could work?

Also, it would be good to have a 'false' (no unit) option for 'line_height_unit' since line-height in CSS is normally unitless.

Regards
Stephan
Posted 2 years ago #
Codestar
Admin

Hi,

Yes yes, why not. It's possible. Ok I noted enqueue font and line-height things. It will come in the next update

Regards, Codestar

Posted 2 years ago #
stv11c

Hi there, just wondering if you think my suggestion to load Google fonts in editor will make it into the next release?

Also, I am trying to optimise a website for Google Page Speed, and a suggestion is to add 'font-display: swap;' to Google fonts.
Example below showing the '&display=swap' at the end.
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Do you know if this is possible with CSF?

Cheers

Posted 2 years ago #
Codestar
Admin

Hi,

Sorry for delay, I was on holiday.

Yes, the framework typography field adds "display=swap" in front-end already.

Regards, Codestar

Posted 2 years ago #
stv11c

Hi there

Thanks for confirming that the 'display' attribute is used on Google fonts, but all my website when doing a Google Page Speed test still has the following suggestion:

'Ensure text remains visible during webfont load'

I have also attached a screenshot. Thanks.

Regards
Stephan

Posted 2 years ago #
Codestar
Admin

Hi @stv11c,

Hmm, what is the solution ? is there any tip ?

Regards, Codestar

Posted 2 years ago #
stv11c

Hi, I have tested the "font-display: swap;" CSS attribute on custom fonts that I load in CSF and it works great and does not show up in Google Page Speed test.

However, I cannot control the Google Fonts within CSF.
I wonder if CSF is adding the 'display=swap' in the correct spot?
I tried looking for the rendered Google Font script but could not find.

Here is the result of a site you can see:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fxposedesign.com.au%2F&tab=desktop

Regards

Posted 2 years ago #
Codestar
Admin
Hi,

The framework adds "display-swap" option in /codestar-framework/classes/setup.class.php line 645
```
$query['display'] = 'swap';CopyCopied!
```
It makes output like this for eg:

https://fonts.googleapis.com/css?family=Barlow:600&display=swap

Regards, Codestar
Posted 2 years ago #
Codestar
Admin
Hi,

Btw. As I see, you using ajax load google font. hmmm set as normally and try to add in head:
```
<link rel="preload" as="font">CopyCopied!
```
Regards, Codestar
Posted 2 years ago #
stv11c

Hi, I turned off the CSF Google Font async option and the results have improved!
However, it is now showing two 'Roboto' fonts that I am not using in my project.
I tested another site and it's the same.
I wonder what is loading the 'Roboto' fonts?

- https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2
- https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2

Regards
Stephan

Posted 2 years ago #

Codestar
Admin

Hi,

Roboto source like this: https://fonts.googleapis.com/css?family=Roboto&display=swap

Take a look our client website pagespeed result ( I chose a clean page ):

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcaraudiologic.com%2Fprivacy-policy%2F

We have some tips/tricks about font and sources. maybe you want to try.

Return back all changes, and use it normal mode.
Add "preconnect" to head.

<link rel="preconnect" href="https://fonts.gstatic.com">CopyCopied!

Let's add "defer" for sources and remove version numbers.

/**
 * Adds async/defer attributes to enqueued / registered scripts.
 */
function stv11c_defer_filter_tag( $tag, $handle ) {

  if ( ! is_user_logged_in() ) {

    $tag = str_replace( 'src=', 'defer src=', $tag );
    $tag = str_replace( 'href=', 'defer href=', $tag );

    if ( $handle === 'csf-google-web-fonts' ) {
      $tag = str_replace( 'stylesheet', 'preload stylesheet', $tag );
      $tag = str_replace( '/>', 'as="style" crossorigin/>', $tag );
    }

  }

  return $tag;

}
add_filter( 'style_loader_tag', 'stv11c_defer_filter_tag', 10, 2 );
add_filter( 'script_loader_tag', 'stv11c_defer_filter_tag', 10, 2 );

/**
 * Remove version query arg from script and styles
 */
function stv11c_remove_version_query_arg( $src ) {

  if( ! is_user_logged_in() && strpos( $src, 'ver=' ) ) {
    $src = remove_query_arg( 'ver', $src );
  }

  return $src;

}
add_filter( 'style_loader_src', 'stv11c_remove_version_query_arg', 10, 2 );
add_filter( 'script_loader_src', 'stv11c_remove_version_query_arg', 10, 2 );CopyCopied!

Done, try it now.

Regards, Codestar

Posted 2 years ago #