Cloudflare worker for Google fonts, not working as expected


#1

I just read the Cloudflare blog about Google font’s rewriting and local hosting.

As such I enabled Cloudflare workers and implemented the script. However it’s not working as expected!
The script doesn’t rewrite some Google font URL’s and the fonts which are rewritten result in a 404 error…

Examples:
https://www.webpagetest.org/result/181122_Y4_a808e4210c1f746054330ba9d9cfe98a/1/details/#waterfall_view_step1
https://www.webpagetest.org/result/181122_KJ_7269d7da44d7be62044ad39f18770f28/1/details/#waterfall_view_step1

As you can see in these examples there are 404 errors, which slow down and result in faulty rendering of my webpage. Additionally some Goole domains are not even rewritten…

Can someone help me resolve this?


#2

Yeah, I tried that one as well and it didn’t change anything on the site I tried it on. No 404 errors, though. Just…no change at all.


#3

Did you configure the routing part? You have to specify on which page or pages it should be used.


#4

Yes, I wildcarded it: example.com/*


#5

To answer my own question, I had to enable the route for:
https://www.elitegameservers.net/fonts.gstatic.com/*

What I’ve noticed is that some fonts are still being downloaded from Google while others are not.
In my case the Opensans font was rewritten correctly, however the Roboto font wasn’t.

Perhaps this explains your issue?


#6

That didn’t do it either. And why wouldn’t https://example.com/* include the fonts.gstatic.com path?

What I’ve done so far:

  1. Went to Github and copied the script
  2. Pasted it straight into the Workers script window with no modificiations
  3. Added https://example.com/* to Routes

#7

@gijsvandervelden - It looks like one of your theme files is doing an @import for the Google Fonts css file. The worker doesn’t currently look at css files for that but it shouldn’t be too hard to add. That would be a pretty big additional win for performance because it’s adding ~300ms to your start render because the browser doesn’t discover the @import until after it downloaded the theme css so it can’t get a head start on fetching it.

Modifying the worker to also scan stylesheets for the font css @import shouldn’t be too hard. I’ll see if I can take a crack at it today and update the sample.


#8

@sdayman if you can DM me a sample page where it’s not working I’d be happy to take a look. It’s possible there’s a similar situation where the font css isn’t referenced in the HTML (or the worker isn’t able to find it for some reason).


#9

@gijsvandervelden If you want to try an updated version of the worker that should also work with the external stylesheets I have one ready to go in my working fork on GitHub. I’ve done some basic testing and it looks to be working.


#10

Thanks, it works well now :slight_smile:
The page renders noticeably smoother, before the text wouldn’t render for half a second. :+1: