Font Awesome CDN Now in Beta, Loads Icons Asynchronously with Automatic Accessibility Best Practices

Font Awesome, the open source vector icon collection used by more than 300 plugins on WordPress.org and many free and commercial themes, announced the beta release of its new CDN. Developers can now add a single line of code to bring the icons and CSS toolkit into their projects.

The icon files and CSS are hosted by MaxCDN, which serves a cached version that loads quickly on websites that use Font Awesome. The CDN uses Web Font Loader, which was co-developed by Google and Typekit, to load the icons asynchronously. This also gives developers CSS and JavaScript events to hook into on loading.

FontAwesome 4.6 added a new accessibility icon category and the new CDN helps to automate outputting the correct markup. If the icon you’re using has semantic meaning, including an accurate title attribute with the inline icon will trigger Font Awesome’s JS to do the rest.

Font Awesome requires an email address from those want to use the CDN so it can issue a unique embed code for each. Developers also have the option to register a Font Awesome CDN account to keep track of sites and apps where they are using the icons, and manage multiple embed codes. Once logged in, you can enable or disable auto-accessibility, asynchronous icon loading, easy updates to newer Font Awesome versions, and CSS or JS embed.

One of the most convenient reasons to use the CDN is to simplify updates. WordPress plugin and theme developers do not have to bump versions or push any code to use the latest version. Font Awesome version changes can be triggered on an individual basis for each embed code in a developer’s account dashboard. Check out the instructions at cdn.fontawesome.com to get your project hooked up.