Include google webfonts directly in favor of loading remotely

[thomasplevy]

In light of this recommendation change (for themes) we should probably get out in front of this and load certificate fonts locally in favor of loading them from Google directly.

https://make.wordpress.org/themes/2022/06/18/complying-with-gdpr-when-using-google-fonts/

Source: https://github.com/gocodebox/lifterlms/blob/f40e79dcb75486e0581d19e0d46c462e1801b3f1/includes/functions/llms.functions.certificate.php#L96-L164

I think that a safe bet is to just switch to loading them locally. Though by doing so we'll create a "performance issue" for anyone who considers loading the fonts from the local site to be detrimental to page load speeds.

Perhaps a filter flag could be used to switch back to the google-hosted URL for anyone who might wish to continue loading remotely.

[donaldafeith]

The best way I can find to do this would be to have the fonts downloaded in to a folder /fonts/ or some other way and then called to. Example: 'imperial-script' => array( 'name' => 'Imperial Script', 'href' => 'https://the-website-using-them.com/css2?family=Imperial+Script&display=swap', 'fontFamily' => 'Imperial Script', ' . $serif, ), Or (Not tested just brainstorming but calling using the get_site_url() to the plugin and then /fonts/and the font css family there.) 'imperial-script' => array( 'name' => 'Imperial Script', 'href' =>(get_site_url())'/fonts/css2?family=Imperial+Script&display=swap', 'fontFamily' => 'Imperial Script', ' . $serif, ),

I know we could do an @import but it would still call to Google. If they totally don't want that anymore the best way I figure is to include the fonts (I will check to see if that is allowed... I believe it is.) and then package them as well.

Any thoughts on this? I'm going to do some different ways of doing it and then we can pick the best way in terms of speed, bandwidth usage, and user loading... That's the only thing I worry about is user browser loading. Google is fast and usually very good about maintaining their codebases (but not their documentation... :D ) But I could write up a fallback (if WordPress is okay with that) in that we could have it... In theory if it was taking too long to load (page hosts vary...) it could then fallback to Google to import/download/etc.

[thomasplevy]

Hey @donaldafeith

There's this: https://github.com/WPTT/webfont-loader

But... I'm not sure using that is necessary for our project here.

My thinking is/was that we'd essentially grab the raw CSS google would load, for example from here: https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap

Then grab copies of the actual fonts (the .woff2 files is sufficient with IE now "dead") and commit them directly to a new directory in the existing fonts directory (I'd like each font in it's own subdirectory, the existing font-awesome should stay in place for backwards compat though)

Then we copy the google-loaded CSS, replace the URLs with calls to the file on the local site (see LLMS_PLUGIN_URL, and load the css dynamically when needed (this only applies to certificates at them moment).

I think this section can be replaced with our new local equivalent of the Google-hosted stylesheet: https://github.com/gocodebox/lifterlms/blob/f40e79dcb75486e0581d19e0d46c462e1801b3f1/templates/certificates/dynamic-styles.php#L27-L38

This will also need to be updated: https://github.com/gocodebox/lifterlms/blob/a1b25d1e64d83651108487b663dd804c58c5844e/includes/admin/class.llms.admin.assets.php#L120-L140

That's what I'm thinking...

[donaldafeith]

I like it. The folders are a lot cleaner compared to what I considered. So, definitely a much better idea. I haven't browsed all of the webfont loader code, but I can see the idea that it has. Something like wget to bring all the fonts. (Which I don't think we would need that if we just include them, and have the folders there... ) Shouldn't need to have them looked at for updating each time. (Really, how many times does a font get updated? :) ) But yup. That's basically what I was thinking. Just have a fallback to Google. Thankfully, IE is gone. It was really good, though... (For downloading a new browser.) :D But it's one less browser since Edge uses Chromium codebase it works with nearly everything Chrome can.

[thomasplevy]

My thinking is/was that we'd essentially grab the raw CSS google would load, for example from here: https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap

Then grab copies of the actual fonts (the .woff2 files is sufficient with IE now "dead") and commit them directly to a new directory in the existing fonts directory (I'd like each font in it's own subdirectory, the existing font-awesome should stay in place for backwards compat though)

Then we copy the google-loaded CSS, replace the URLs with calls to the file on the local site and save those CSS files in the assets/css directory

Then we'll have to update this function: https://github.com/gocodebox/lifterlms/blob/trunk/includes/functions/llms.functions.certificate.php#L109-L153

I'd like to keep the google preloading as a fallback through a filter so I'm thinking that if we add a filter to the top of the function, something like:

$use_g_fonts = apply_filters( 'llms_use_google_webfonts', false );

Then each href prop of the fonts array can be switched to a ternary, eg:

'href' => $use_g_fonts ? {google-url} : LLMS_PLUGIN . {localurl}

This way we'll load the local-hosted by default and if anyone complains and wishes to use the google cdn (for better performance) than can flip it back with a one-liner:

add_filter( 'llms_use_google_webfonts', '__return_true' );