AWS Lightsail WordPress Headers and Fonts Issue

Good day

Will a kind soul please help a desperate novice?

All my WordPress websites are hosted on AWS Lightsail. They all have an issue where the woff2 font icons don't show at times.

I have used the built in SSL Certificate generator on Lightsail. Didn't help. Then I created a distribution with its own SSL certificate. Didn't help. I have used Better Search Replace Plugin in WordPress. Didn't help.

Most advice I got was that I should add code to the .htaccess file. See code below. Didn't help.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

<ifmodule mod_headers.c="">
   SetEnvIf Origin "^(.*\.domain\.com)$" ORIGIN_SUB_DOMAIN=$1
   Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
   Header set Access-Control-Allow-Methods: "*"
   Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</ifmodule>


OR

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
    Header add Access-Control-Allow-Origin "http://mysitename.com"
</IfModule>
</FilesMatch>

All of the above did not work. 🥲

Websites in question: www.bioskoop.co www.groovejet.co www.popcorn-time.co.za www.rickbronkhorst.com www.therainbowmafia.co www.skattedoos.com

I'm just a novice standing in front of the smart guys asking you to help me, please. 😁