Font-awesome: Feature Request: AMP (Accelerated Mobile Pages) Support

Created on 26 Feb 2016 · 14Comments · Source: FortAwesome/Font-Awesome

We use FontAwesome in several projects and we'd like to use it in our AMP pages. Google needs to whitelist Font Awesome, if you meet certain requirements (which I think you already do). Would love it if Font Awesome were whitelisted so we can use it without all sorts of backflips.

More info here:
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#custom-fonts

feature

Source

sgatz

👍4 ❤1

Most helpful comment

I don't know about your specific case, but I have recently used Font Awesome icons for AMP HTML pages and it worked fine. To verify that:

Visit http://www.yogalondon.net/articles/how_to_become_yoga_teacher.amp.html#development=1
The hamburger menu and two of its navigation items feature FA icons.
Check the console where AMP validation is successful.

whiplashoo on 21 Mar 2016

👍7 🎉3 ❤2 😄1

All 14 comments

Asked @davegandy for feedback

tagliala on 26 Feb 2016

We are using FA too in many spots and therefore would appreciate if it gets whitelisted soon.

RauchenwaldC on 2 Mar 2016

Refers to: #35

tagliala on 3 Mar 2016

Please do not +1 this request here or on amphtml's repo

tagliala on 3 Mar 2016

@sgatz fontawesome is supposed to be whitelisted. Could you please give a try and let me know?

tagliala on 18 Mar 2016

@sgatz @RauchenwaldC could you please verify?

tagliala on 21 Mar 2016

I don't know about your specific case, but I have recently used Font Awesome icons for AMP HTML pages and it worked fine. To verify that:

Visit http://www.yogalondon.net/articles/how_to_become_yoga_teacher.amp.html#development=1
The hamburger menu and two of its navigation items feature FA icons.
Check the console where AMP validation is successful.

whiplashoo on 21 Mar 2016

👍7 🎉3 ❤2 😄1

@whiplashoo thanks!

It also works for me locally

<!doctype html>
<html ?>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello <span class="fa fa-globe"></span></body>
</html>

tagliala on 21 Mar 2016

@tagliala Just curious, is there any particular reason to include the integrity and crossorigin properties?

whiplashoo on 21 Mar 2016

Just copy&paste from bootstrapcdn

http://stackoverflow.com/questions/32039568/what-are-the-integrity-and-crossorigin-attribute

Added to 4.5.0 milestone, but this change should also affect older versions

Closing here but feel free to comment if you experience any issue

tagliala on 21 Mar 2016

@whiplashoo

I am no coding expert, so this is more asking questions than pointing out errors. I trust you might be willing to comment to help me learn.

when I test http://www.yogalondon.net/articles/how_to_become_yoga_teacher.amp.html
here
http://technicalseo.com/seo-tools/amp/

I see rel="amphtml"
(from canonical URL) show as X
and Implementation show as X

On a simple standalone page I am working on I have no canonical added I get n/a for Canoical
Note - there is no desktop version, though I think I still need to add canonical

I also get X for implementation

I see a 'flashing green icon' for CDN which I presume is OK. What CDN are you using, where is that in the code?

Google Page Speed Insights
https://developers.google.com/speed/pagespeed/insights/

I see you have the same"error" as me
"Eliminate render-blocking JavaScript and CSS in above-the-fold content"

https://fonts.googleapis.com
https://maxcdn.bootstrapcdn.com

I know Page Speed Insights often returns 'render-blocking' errors for many sites, but keen to read comments.

Is there anything you can do to increase your 71/100 mobile score? I get 64, but I have not optimised images yet.

ColinK

ckxion on 3 Jun 2016

@ckxion

The rel="amphtml" shows as X because the owner of the site (I created this AMP page for a client) has not included the rel="amphtml" tag in the canonical document. That is probably why the Implementation is X too.

On another AMP page I did for a client, when I test through this tool, all is green. Here both the original document and the amp page have the proper rel tags.

The CDN that flashes green means that Google has already crawled the page and added it to their own CDN for AMP pages automatically. This takes 3-4 days to happen, after the AMP page is live and validated without problems.

I didn't bother with optimizing the AMP page for Pagespeed Insights other than the usual CSS/JS minification and image optimization, as AMP pages are already ultra-fast.

Generally, if you want to pass the 'above the fold content' rule, You should inline all CSS that is needed for the above the fold content in the head of your document and async load all other CSS files (stylesheets and fonts, like FontAwesome) in the bottom of the file. You can see an example where I achieved that here (https://whidev.com/yl/). If you run this in Pagespeed Insights it gets double 100/100 score and of course, loads instantly.

whiplashoo on 3 Jun 2016

@whiplashoo I removed "integrity", leaving "crossorigin". Did the AMP Validation Test and it FAILED with these messages: