FontAwsome Pro is driving me insane

My netlify site is https://webmrk.netlify.app/

I am having trouble getting FontAwesome Pro (FA from here on out) to work properly. I am using Remix along with the Netlify Remix plugin. At first I naively just did a git deploy and expected everything to be OK.

However, since then I now know that it was a permissions error. FA requires a key in order to be downloaded. I thought that Netlify would take it from my .npmrc file, but again, learned that is not the case. Though I still need to use the the .npmrc file I altered it to now include an Environment variable.

So I changed the file to require the FONT_AWESOME_PRO_TOKEN variable then set that variable in my Netlify panel to include my private key for FA.

Success!!! Or so I thought :crying_cat_face:
The site now builds properly, but I still do not see the Icons.
When I inspect the dev panel in Chrome or Firefox it says:-
downloadable font: download failed (font-family: “Font Awesome 6 Duotone”

I have now run out of ideas on what to do. My only other alternative is to use FA Free, but I do not want to do that (especially as I am paying for PRO).

I am at a complete loss and do not know where to go from here.

Any help is greatly appreciated.


Regards,
Anthoni

Hi @LeadFinderApp

Have you seen these threads about using private modules/repositories?

Hi,

I tried using the latter one (as FontAwesome is not a sub-module, just a private NPM resource).
I added in the NPM_TOKEN like it says and then added that token to my deploy using the dashboard like it shows.

However, it still does not display the icons. Just an empty space like before.
One thing I did notice is that my .npmrc is different than the one listed in that link.

For example their .npmrc says to do it like this
//registry.npmjs.org/:_authToken=${NPM_TOKEN}

However, my .npmrc is like this:
@fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=${NPM_TOKEN}

It seems that FontAwesome themselves have their own private NPM and it needs to be pulled down from there not the public NPM repo. Could this be why it fails?

Regards
Anthoni

Have you seen the Font Awesome documentation on this topic?

I haven’t used Font Awesome Pro, so don’t have first-hand experience to offer unfortunately. Also check out some similar threads in these forums.

Yep, seen that.
That is the page that tells me how to set up .npmrc amongst other things.
Going through all the site to see if I can anything that will help me get around this.

Regards,
Anthoni

I think I’ve solved it.
Have to create what’s called a Kit
This basically produces a JS file that is locked to my FA Pro account.
Plus I can further limit it to specific domains.

Just re-deployed and I can now see all the icons I require.

Regards,
Anthoni

1 Like

Thanks for coming back and sharing that, @LeadFinderApp :raised_hands: this will help future Forums members who encounter similar situatuons.

1 Like