XF 2.1 font awesome path change

briansol

Well-known member
I am attempting to offload the fa woff's to my cdn.

I found the path in
setup_fa.less

and swapped out
Code:
@fa-font-path:         "styles/fonts/fa";
for
Code:
@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.
fontsprob.png

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:
Code:
...

@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.

Code:
/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

Well-known member
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:
wofonts.png


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.

wfonts.png

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.
 
Top