Font Awesome CDN is Being Sunsetted - What Now?


#1

FYI - We have a problem brewing with Axure + Font Awesome.

Getting Font Awesome fonts working locally was always a bit complicated but easy once you know it well - Download & Install the Font Awesome OTFs fonts, then open Axure, and then go to fontawesome.com/icons, click the round “I” info icon in the upper right to expose the copy to clipboard icon below each icon, so you can easily copy any icon, paste into your axure wireframe, it’ll look like an empty box temporarily, then you highlight it and change the font for that box to Font Awesome, and presto, it works. Generating local prototypes would show correctly.

When you publish to share.axure.com with just that, it’d show correctly for you (since you have all the font awesome fonts installed locally and the browser can figure that out), but for others without them, they see empty boxes.

That brings us to the brewing problem I mentioned in the opening line - if you want the Font Awesome fonts to show correctly on your published prototypes that render at share.axure.com for people other than you (you know, the whole point of all this), the solution ‘currently’ is to click the blue Axure share button in the upper right, and in the Fonts tab, add a link to Font Awesome’s CDN-hosted all.css file, like this: https://pro.fontawesome.com/releases/v5.10.1/css/all.css. The problem is - Font Awesome appears to be attempting to discontinue this method. They’ve already buried the ability to even find that link deep in fontawesome.com/account/cdn, and on that page, they have a big yellow warning that this functionality is being sunset, as seen here:

I started a chat thread with a Font Awesome support rep named Trevor, asking him about the absence of css from the start page where it used to live, and after initially missing the point that having links directly to .css files is the linchpin of how we all use Font Awesome with Axure, he eventually copped to the fact that Kits only gives you a link to a js file, and once the CDN is sunset, there’ll be no way to link directly to css.

I hope someone has a solution for this, because I like FontAwesome, and I’d like to not have to discontinue using them.


#2

Hi!

This may not be what you are looking for, but I followed the “host the webfont yourself” instructions and then linked to the all.css file on my server (AWS S3 bucket), and that worked for me. Note that I had to set up CORS for that bucket to allow all origins. This was easy to do after a quick Google.

Here’s a sample with a webfont linking to my hosted css file, which still works when I remove Font Awesome from my system.

https://v39lx7.axshare.com/page_1.html

Note that for whatever reason, I can’t get the the Regular style of the latest Font Awesome 5 Free to display in Axure or Sketch (even with a fresh restart of my system): only Solid displays. This is true whether I use TTF or OTF. Oddly, Font Book displays it.

If you want to try my hosted css file just to see if it works, feel free. I’ll take it down after you reply or in a couple days, only because I don’t know what it will cost me if widely used. (It’s just $0.70 to download a terabyte, but I’m trying to keep my monthly hosting costs under $0.75!) Note that just like in Sketch and Axure, I can’t get the Regular style of the free version to work using it.

https://josephbrick.com/0_fontawesome/css/all.css

#3

Yup, I guess hosting it ourselves will become the only option, and then we’ll all start re-using each other’s links. Not ideal, clearly.

@josephxbrick regarding your difficulties getting the font awesome fonts to show, I noticed that with Axure RP 9.0.0.3655 + Font Awesome 5.10.1 OTFs installed, that if I had a single element with text in it, and that text was say, a line with a font awesome font, then a new line and a different font, that the font awesome fonts wouldn’t display. If I removed the second line, then the font awesome font showed correctly. Not sure if that’s related to your issues, but that was what I just experienced today.


#4

Well, sounds like there is a business opportunity here!


#5

Hey everyone, we’ll take a look into this! Thanks for the heads-up.


#6

Thanks @Rachel I’m having the same issue and it was brought to my attention by a client I sent some comps to. Now, i just copying and pasting icons from Sketch into Axure.


#7

@shaunrene - this might be what you’re looking for: 6 Steps to get Font Awesome 5 Pro + Axure 9 working