3.18 - Frontend part

[piotrbak]

User Story
As a user, I’d like to use locally stored Google Fonts on the front end instead of the online ones

Acceptance Criteria

• The feature will rewrite the Google Fonts paths into the local ones
• The feature will keep the original structure as data-wpr-hosted-gf-parameters argument
• The feature will rewrite V1 and V2 separately, if both of them are inside the source at the same time, we’ll also save and print two separate CSS files
• The feature will add its markup just after the OCI feature preloads
• The feature will print data correctly when used on the multisite

Example

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://domain.ext/wp-content/cache/wp-rocket/fonts/google-fonts/2/f/b/1/d/3474c012728984fc4241fafaf56.css" rel="stylesheet" data-wpr-hosted-gf-parameters="family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">

[Khadreal]

[Update]

Scope a solution:

• We would be combining the urls of the google fonts find on a page and separate v1 and v2
• Passed this urls to the backend system here 3.18 - Backend and filesystem part #7062
• Rewrite the CSS which is created from the backend system to the HTML

In general, we would be creating at least 4 classes for this, Subscriber, Controller and Context and the ServiceProvider class.

• Add a new namespace - Media\Fonts

  • We would have two new class Subscriber and a Controller class in Media\Fonts\Frontend namespace.

    • In the subscriber class, we would be using the rocket_buffer filter to add the markup to the page.

      public static function get_subscribed_events(): array {
         return [
         	'rocket_buffer'                   => [ 'rewrite_fonts', 18 ],
         ];
      }
       public function rewrite_fonts( string $html ) {
          $this->frontend_controller->rewrite_fonts( $html );
      }
      
      

    • In the Controller class we would have the rewrite_fonts which would rewrite the css to the page and should also check if the features is available and if it's true we then get all the fonts link and passed to the backend filesystem to download/rewrite the css.

     public function rewrite_fonts( string $html ) {
          if ( ! $this->context->is_allowed() ) {
    	return $html;
    }
            // Use the url hash value to get the css file paths
           ....
     }
    
    
    

  • Create a new Context class in Media\Fonts\Context namespace implementing ContextInterface which would be strictly to know if the feature if available or not

         public function is_allowed( array $data = [] ): bool {
      if ( get_option( 'local_google_fonts' ) ) {
      	return false;
      }
    
      return wpm_apply_filters_typed( 'boolean', 'rocket_self_host_fonts', true );
        }
    
    

• Lastly, create the serviceProvider class in Media\Fonts\ServiceProvider and include the classes created above

We currently have a GoogleFont class that already combined urls we can be leverage the methods there(maybe a bit of refactoring) for the fonts url combination, the fonts combination features shouldn't change.

[remyperona]

LGTM

[Miraeld]

Looks ok to me as well

[Miraeld]

Following the conversation on https://wp-media.slack.com/archives/CUT7FLHF1/p1730991474130799,

This issue/PR should assume that the local download of the CSS + fonts + rewrite of paths inside the CSS happened and so you can rewrite the URLs in the HTML

So to make it clearer:

This issue/PR must only change the <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
to <link href="https://domain.ext/wp-content/cache/wp-rocket/fonts/google-fonts/2/f/b/1/d/3474c012728984fc4241fafaf56.css" rel="stylesheet" data-wpr-hosted-gf-parameters="family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">

And for this,

With rocket_buffer we get all V1 & V2 fonts, combine them with WP_Rocket\Engine\Optimization\GoogleFonts\Combine here & WP_Rocket\Engine\Optimization\GoogleFonts\CombineV2 here,
Check if the file exists in the path of the current URL, and then we have to assume it does exists, so we rewrite the <link href="" tag.