XF 2.1 font awesome path change

[briansol]

I am attempting to offload the fa woff's to my cdn.

I found the path in
setup_fa.less

and swapped out

@fa-font-path:         "styles/fonts/fa";

for

@fa-font-path:         "https://fonts.mydomain.com/fa";

where the fonts subdomain is a cname to aws cloudfront which sources from mydomain.com/styles/fonts

The font woff download (as expected) when navigating to the fonts subdomain url, so the cname, cloudfront, and path are set correctly.


2 problems:

1) Calling from css.php, the item is a 404. it can't seem to load the font file for some reason. It shows as a hit to the cdn in the f12 tools, and returns a 200. but then becomes a 404 in context.


If i double-click right there in the console, it will prompt the download.

looking at css.php source, it appears to take the setting correctly:

...

@font-face{font-family:'Font Awesome 5 Duotone';font-style:normal;font-weight:900;src:url('https://fonts.mydomain.com/fa/fa-duotone-900.woff2?_v=5.12.1') format('woff2'),url('https://fonts.mydomain.com/fa/fa-duotone-900.woff?_v=5.12.1') format('woff')}.fad{font-family:'Font Awesome 5 Duotone';position:relative;font-weight:900}
...

Dug a little more and it's throwing a CORS policy issue.

/threads/xxxxx.nnnnn/#post-nnnn:1 Access to font at 'https://fonts.mydomain.com/fa/fa-solid-900.woff2?_v=5.12.1' from origin 'https://mydomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

i will investigate that a bit more...

2) the preload link rel is still relative and doesn't inherit the edited LESS file's setting. These get attached somewhere as it's not part of the page_container template where they show up. Where is that hooked in?

 

[briansol]

1) I fixed cors after many re-do's with the help of this doc: https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

That options checkbox was the kicker.

2) found the preload in font_awesome_setup template.

Concerned about hardcoding my subdomain in there, replacing base_url. Ugh. I guess there's no better way short of making a whole addon to do it.

 

[briansol]

Here's why I wanted to do this. I'm consistently seeing improved load times because the css kicks off before the fonts preload does. This has a trickle effect which allows the blocking preamble js to start it's load faster. DNS seems to be slow to respond because it's busy serving the fonts. I've seen this same large lead time over and over even in low-server load periods.



Regular:



w/ subdomain

I am using aws cloudfront to source directly from my styles/fonts/fa directory, no bucket, so that it will be updated instantly. fonts subdomain is a CNAME to the cloudfront id using an aws cert.



no other changes between these images. and yes, i know it varies from load to load, but these are highly representative of the repeat cases I have been seeing over and over.

end result is a .5 increase in start render performance and full paint.


Next up is to follow the guide Delta and Arn put together to reduce the filze sizes by removing unused icons.

 

[briansol]

this is working in chrome and ie, but a user told me today firefox is still throwing a cors issue.

so, i'm reverting it back for now :/