Wrestling with google fonts -- third part code execution

General
#1

How do I troubleshoot this?

Cloudflare in Development mode –

o Google pagespeed dev – I see what I expect from pagespeed developer page for https://kioskindustry.org – says 79 – notes some render-blocking resources (0.47s)
o GTMetrix – 48 performance D

Cloudflare Operating
o pagespeed developers – says 57 – third party blocking includes gstatic
o GTMetrix – A – third part impact from googledoubleclick and fraudlogix

Disabling/deactivating all plugins has same result

Third-Party Transfer Size Main-Thread Blocking Time
Google CDN 309 KiB 695 ms
…rs=AMjVe6jWO…/m=viewer_base

(www.gstatic.com)|109 KiB|695 ms|
|…rs=AMjVe6jWO…/m=NpD4ec,ws9Tlc,sy0,sy10,sy11,sy1,sy12,sy48,sy2a…

(www.gstatic.com)|108 KiB|0 ms|
|…ct=zgms/rs=AMjVe6jmg…

(www.gstatic.com)|51 KiB|0 ms|
|…service/lazy.min.js

(www.gstatic.com)|26 KiB|0 ms|
|Google Tag Manager|54 KiB|66 ms|
|/gtag/js?id=G-Q2CLXJD64R

(www.googletagmanager.com)|54 KiB|66 ms|
|Google Fonts|60 KiB|0 ms|
|…v27/4UabrENHs….woff2

(fonts.gstatic.com)|15 KiB|0 ms|
|…v27/4UaGrENHs….woff2

(fonts.gstatic.com)|15 KiB|0 ms|
|…v12/pxiDypQko….woff2

(fonts.gstatic.com)|14 KiB|0 ms|
|…v20/KFOmCnqEu….woff2

(fonts.gstatic.com)|11 KiB|0 ms|
|Other resources|4 KiB|0 ms|
|WordPress Site Stats|3 KiB|0 ms|
|Google Analytics|0 KiB|0 ms|

#2

If not self-hosting fonts for better control over the cache, Google fonts are weighty if full families are chosen or if too many (over 3) individual fonts are chosen. When the link is given you for the fonts, navigate to it. There you’ll see your stylesheet Google serves in order to serve the fonts you want. Download it, compress it using this site :

https://www.cssportal.com/css-optimize/

Now, navigate to:

& choose Tools from the menu.

About 1/3 down the page you’ll see CSP Hash. Paste the code (no style tags, only CSS) into the rectangle and get your sha256 hash of Google’s stylesheet. Now, in the head of your document, type <style sha256="sha256-tw5BgRErBMFGcsFZrw7GIlbGA25wh5d6cWc8wmI4KG4=">**CSS** goes here</style>

And in your site’s response headers, your Content-Security-Policy should include style-src `sha256-tw5BgRErBMFGcsFZrw7GIlbGA25wh5d6cWc8wmI4KG4='

Please note the " surrounding the hash in your document head & the ' in your site’s HTTP response headers.

image
image1536×1555 203 KB

It’s this link you want:

https://fonts.googleapis.com/css2?family=Etc.

When you download the CSS they serve you, edit font-display:swap to font-display:fallback while including system fonts for Apple’s devices, Windows, & Linux. A decent Sans-Serif stack is '-apple-system',ui-sans-serif,system-ui,Roboto,"Open Sans",Oxygen,Ubuntu,Cantarell,Helvetica,sans-serif; & for code: '-apple-system',ui-monospace,system-ui,SFMono-Regular,"Roboto Mono","Ubuntu Mono","Oxygen Mono",Menlo,Monaco,Consolas,"Liberation Mono",Courier,monospace;.

This way, if Google doesn’t serve their fonts to you quickly enough, your site will “fallback” to using system fonts. This has the added benefit of fitting in aesthetically with the OS in question.

#3

Thanks for the response. It was weird how some of them only showed up with Cloudflare enabled. I took an axe to it and just removed google GA4 analytics code. Its not an e-commerce site.

Google PSD, lighthouse and GTMetrix all really like it now and the weird stuff all went away.

I do use Roboto but only roboto and I load the bold/italic/regular locally.

I can analyze the server logs if I want or just use jetpack stats for pageviews and clicks. I don’t really need Google Analytics in any practical sense.

Thanks for the suggestion but i am not a big fan of compiled code (personal thing)

Thanks!

1 Like
#4

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.