Worker breaks site (some icons don't display)

Getting Started
#1

Hi,

I’ve been asked to help setting up a website, and I suggested the use of Cloudflare and Cloudinary for image hosting. Unfortunately the owner of the web site uploaded very large images, and a typical page weight almost 30 MB. The solution would be to change the Cloudinary URL to apply a transformation, eg:
https://res.cloudinary.com/userid/images/vxxxx/image.png →
https://res.cloudinary.com/userid/images/f_auto,q_auto/vxxxx/image.png

I tried to use REPFlare : GitHub - Darkseal/REPflare: A lightweight Cloudflare Worker to replace text and inject styles and scripts in any web page

// Text replacement configuration ( ‘sourceText’ : ‘replacementText’ )
const textReplacementRules = {
‘userid/images’: ‘userid/images/f_auto,q_auto’
}

As a result the loading of the site becomes really fast, but some icons don’t display anymore. Even if I change the replacement string so that nothing is changed. For example “icon-location-pin-4” doesn’t display.

I can’t understand what is changed, maybe some asynchronous behavior ? The website is based on Wordpress+Elementor+some plugins :confused:
Thanks for the help.

sb-good
sb-bad

#2

Hello,

#3

Thank you. I read all the doc and cases, and disabled a lot of things.

Still, the problem remains. I can add a few more errors that are generated :
Several fonts are not loaded :
Failed to decode downloaded font: https://site.com/wp-content/themes/my-listing/assets/fonts/GlacialIndifference/Bold.otf
Also
OTS parsing error: incorrect entrySelector for table directory (index):1
And
OTS parsing error: Size of decompressed WOFF 2.0 is less than compressed size
.otf file is okay (e.g. with worker disabled it’s downloaded without problem, it’s a valid font file).

I can give the name of the website by message or mail.

Thanks !

#4

If it is regarding the font and could be depending on the Web browser of the visitor, I do not believe it is due to Workers or Cloudflare itself.

Moreover, kindly have something like this in a .css file:
Example for FontAwesome Icons:

.fa, html{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}

@font-face{
  font-family:FontAwesome;
  font-display:fallback;
  src:
      local('FontAwesome'),
      local('FontAwesome Regular'),
      url(css/fonts/fontawesome-webfont.woff2) format('woff2'),
      url(css/fonts/fontawesome-webfont.woff) format('woff'),
      url(css/fonts/fontawesome-webfont.ttf) format('truetype'),
      url(css/fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype'),
      url(css/fonts/fontawesome-webfont.svg) format('svg');
      font-weight:400;
      font-style:normal;
}
/* When calling this font somewhere, use like */
.myclass{font-family:FontAwesome;}

And use the next tool to convert your font file format to others (the best possible way to all of them and link to them in the CSS) woff, woff2, ttf, eot, otf, svg:

Make sure when calling your CSS file in <head>...</head> section of your Webpage like:

<link href="mycss.css" type="text/css" rel="stylesheet" media="all ... />

To also call the considered font like woff2 with preload and crossorigin="anonymous" attribute:

<link rel="preload" href="myfont.woff2" as="font" crossorigin="anonymous">

Nevertheless, check if your Web server (Apache or Nginx) has got the support to read and provide the considered font format MIME-Type (like woff2) header, in example .htaccess add next:
AddType application/x-font-woff2 .woff2

Give it a try and write back to us with some feedback information :wink:

P.S. Make sure all the needed fonts are at your origin too.

#5

Thank you for your reply. The site works perfectly with speedup + cache from Cloudflare. It breaks only when a Worker is activated.
The missing character is defined in /wp-content/themes/my-listing/assets/dist/icons.css?ver=2.4.7 which starts with
@font-face{font-family:icomoon;src:url(…/fonts/icomoon.eot?okry1k);src:url(…/fonts/icomoon.eot?okry1k#iefix) format(“embedded-opentype”),url(…/fonts/icomoon.ttf?okry1k) format(“truetype”),url(…/fonts/icomoon.woff?okry1k) format(“woff”),url(…/fonts/icomoon.svg?okry1k#icomoon) format(“svg”);font-weight:400;font-style:normal}[class*=" icon-"]
With or without Workers, this file can be downloaded (url is valid).

I can be reached at @yichnal on Telegram or [email protected]

#6

I am not sure if workers are capable of understanding/reading the MIME Type of the requested files? If so, you could try to get the content-type of the requested file(s) and serve them as supposed.

Could you try with this one?