1

I have scenario in GoogleAMP Project, where I can not move CSS out of head tag. Or event can't create element with JavaScript. And add it to head later after page content loads.

enter image description here

Is there another way so it may satisfy AMP restrictions as well as GooglePageSpeed insights.

Thanks.

Bachcha Singh
  • 3,850
  • 3
  • 24
  • 38
Mutafaf
  • 126
  • 3
  • 13
  • Hi you just described the nature of AMP. Please explain what exactly you want to do? Be specific. I understand it is regarding fetching dynamic style. – Chris Aby Antony Sep 10 '18 at 11:33
  • I basically want to avoid this render blocking. A solution is normally; to write the css files for font awesome at the end of body tag, but AMP doesn't allow to write css files out of head. – Mutafaf Sep 10 '18 at 11:43

2 Answers2

1

You can add your css using link property whitelisted by AMP

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

The following origins are whitelisted and allowed for font serving via link tags:

Typography.com: https://cloud.typography.com

Fonts.com: https://fast.fonts.net

Google Fonts: https://fonts.googleapis.com

Typekit: https://use.typekit.net

Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com

For more information click here

Update : for GooglePageSpeed insights (render-blocking) css

you can use like this 

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="preload" as="style">

Note : preload work with modern browser only

Bachcha Singh
  • 3,850
  • 3
  • 24
  • 38
  • I am using google Fonts (whitelisted origin) But still the issues is there. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.zayantravel.com%2F. – Mutafaf Sep 11 '18 at 14:44
  • @Mutafaf check my updated answer, hope this help you. also please validate your your site with amp there are some errors. – Bachcha Singh Sep 12 '18 at 09:25
  • This would create another issue as you mentioned, in your Note. – Mutafaf Sep 12 '18 at 19:17
  • @Mutafaf it isn't create the issue, some old version of browser does not support – Bachcha Singh Sep 13 '18 at 02:53
0

Okay as far as I know there is no way of fetching 3rd party css to AMP page. But you can download fontawesome's all.css file and manually copy the styles from it to your <style amp-custom> tag. Again since AMP does not permit style more than 50 KB you will have to handpick the necessary styles from fontawesome.

PS: I'm not sure if there is any copyright issue in using fontawesome styles as described above, please do check that. But it is guaranteed to work.

Chris Aby Antony
  • 813
  • 4
  • 9
  • This was just an example question. What if i need to use google fonts So I will have to do the same? I don't think its a good decision to copy all the css in – Mutafaf Sep 10 '18 at 16:28