Font-awesome: Idea: make Font-Awesome available via Google WebFonts

[andreimoment]

http://www.google.com/webfonts have a wide selection but miss a pictogram font. They also highlight Kickstart projects for fonts to be included in their library ($3k on average).

Including Font-Awesome in Google WebFonts would make it available to many, and possibly result in it becoming a de-facto standard on the web.

[davegandy]

I started poking around into this about 2 days ago, but couldn't find how to submit fonts. I figured if Font Awesome got enough traction, it would make sense to take it further. Which given the feedback I've been getting, could be sooner rather than later.

[fleeting]

@davegandy https://services.google.com/fb/forms/submitafont/

[davegandy]

Awesome. Thanks for the pointer. Not sure if Google webfonts is the right fit yet, as this also requires some extra code to make useful.

[webveloper]

Google Web Fonts is a _perfect_ fit for Font Awesome, and here's why: http://fonts.googleapis.com/css?family=Font+Awesome&text=ABC - that "ABC" means I only get those three characters. The only non-awesome thing about Font Awesome is forcing users to download hundreds of icons they'll never see.

[logicalhan]

I would also love it if you could do this. Using this as a font is a great idea, but since firefox doesn't allow cross-domain fonts, using font-awesome becomes a bit of an asset pain-point, since you become prohibited from stashing your assets on s3. Having it available through Google Web Fonts would solve this problem. I would be eternally grateful if you could do this (more so than I already am, having used your fonts).

[meshy]

Yes, please! :+1:

[kremalicious]

At first sight this sound like a great idea. But I would like to give a reality check:

1. _Additional css rules_: Font Awesome needs additional css to work which is fundamentally different from what you'll get with Google Web Fonts. We would have to convince Google to show more css rules to the user when selecting this font.
2. _Accessibility_: icons are pushed in with pseudo elements and mapped to Unicode's Private Use Area. So @webveloper, what you're trying to do would not work except you map the icons to "normal" characters. But this would break accessibility. And requires two version of font files to be maintained.
3. _Missing rights_: Google Web Fonts only allows submission of fonts where "you own all related copyrights, trademarks and other rights for." While this is true for most icons in this set, it doesn't apply to all social media icons. I don't think e.g. Twitter would sue because their logo is used but to be really on the safe side, we would have to get written permissions from all of them.

So you see it's not just a matter of submitting the font files. And as a reminder: if you want to subset your icon font today, there's Fontello and IcoMoon app. And @logical42, there're are other ways to work around Firefox cross-domain font problem. If you're using Apache, setting the correct MIME type and Header set Access-Control-Allow-Origin "*" for your font files should solve that. Another way would be to encode the font files as base64 directly in the css file.

[meshy]

While 1 & 2 could be worked out, 3 seems insurmountable tbh. Copyright reform ftw :/ It's a fair point, guv, and well made.

[davegandy]

I just initiated a submission to add Font Awesome to GWF, but it really requires a conversation rather than a form submission.

If anyone knows someone a Google Web Fonts, I'd be glad to have a conversation to see if something could work.

[logicalhan]

@davegandy, thank you for doing so, I think it could relieve a decent bit of developer pain, and I am personally very grateful to you for it.

@kremalicious, I agree with meshy that the copyright issue is probably the most significant problem, though I think it's a problem regardless of whether or not FontAwesome ends up on Google Web Fonts; in other words, it's actually just a currently existing issue. I am aware you can add the Access-Control header to fix the Firefox issue. However this is a solution that only works if your content-delivery-network involves something other than Amazon S3, which still refuses any S3 bucket owner to change their own Access-Control header.

[davegandy]

The folks at Google Web Fonts got back to me last night:

Hi!

I am sad to say that the Google Web Fonts team has decided not to
pursue icon fonts at this time. If your font is available under the
SIL Open Font License v1.1 and has glyphs in the correct Unicode
encoding positions, that will help a lot if the team decides to do so.
Thanks!

Cheers

The license issue and unicode character placement could be solved. But it looks like they're avoiding icon fonts altogether for now. Shame. I asked them to keep me posted.

[Florian-R]

Changing the character placement breaks a great feature of Font Awesome : being screen-reader friendly.
I'm wondering if it's OK with GitHub terms of service to use the actual documentation page as a CDN.

[davegandy]

By changing character placement, all i mean is to make proper use where it's available. For instance, the star does have its own unicode character not in the PUA region. The benefit is that a screen reader would actually read it as "star" instead of nothing. But some decent aria markup could also achieve similar results.

And I was wondering something similar about using GitHub as the un-customized font CDN. Might have to test that out to see if it works. Heck, if you could just have a single less import statement that points to the less file itself, that could be REALLY clean and easy for folks to drop this in.

Eventually, it does need to be it's own separate app where you can subset characters and serve up your own version of the font.

[Florian-R]

Thanks for the clarification regarding character placement.

Talking about automatic subsetting, i did a bit of research about it. The only way i find to achieve it was to write a script for FontForge. I didn't investigate further, so if someone know a smart server-side solution, feel free to share.

[kremalicious]

Using github as a CDN is ok, as long as you link to the gh-pages files and not the raw files. Personally, I wouldn't use that for production though. And GitHub just isn't meant as a CDN, so this really feels like an abuse of their infrastructure, especially for a project with thousands of users.

[ilanah]

maybe you can host the font files on bootstrap cdn ?
I mean you did create them for Bootstrap extension, no... ?

[wwwlicious]

+1 for this, finding a CDN home together with web font loader setup would really round off the experience.

Love the icons btw, so thank you for all the hard work!

[logicalhan]

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

This shouldn't be an issue anymore, for s3 users anyhow, as amazon has finally allowed cross-origin-resource-sharing.

[Enalmada]

FYI: s3 has a cross-origin-resource-sharing bug so beware.
https://forums.aws.amazon.com/thread.jspa?messageID=380325&#380325
( I tested maxCDN, cdn77, and they all have problem. So using s3 behind cdn for this is useless)

[tc]

I noticed font-awesome is hosted on a CDN through http://netdna.bootstrapcdn.com/

http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css

[freddyheppell]

CDNJS host it
http://cdnjs.com/#font-awesome

[heralight]

Then something like this can be use to prevent Firefox FOUT with google webfont loader:

https://gist.github.com/heralight/5273210#file-gistfile1-html

<script type="text/javascript">
    WebFontConfig = {
        custom: { families: [ 'FontAwesome' ],
            urls: [ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css'] }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
                '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
</script>
<style type="text/css">
    .wf-loading [class^="icon-"],
    [class*=" icon-"] {
        visibility: hidden;
    }

    .wf-active  [class^="icon-"],
    [class*=" icon-"] {
        visibility: visible;
    }
</style>

[fusion27]

:+1: on FontAwesome availability in Google Docs.

[lupuxyz]

we can't visit Google,we are in China.

[tagliala]

Please read https://github.com/FortAwesome/Font-Awesome/issues/35#issuecomment-6328238

[macmladen]

The reluctance Google may have could be connected with their own Material Design Icon

Also copyright issue could be a big one considering that not seldom some person pops out claiming his/her share of something that is released to free use therefore forcing many projects to change (and that is an issue with or without GWF). That would mean that FA should check on origin on current glyphs and all future submitted glyphs not to contain any copyright protected sign or design that could spell problems.