External Style Sheet is not valid in AMP Pages

Question

I am converting my HTML page into AMP Pages. I have seen test url https://validator.ampproject.org/#. This page is validate from AMP.

Screen Shot for Help:

But When I used External Css.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

Then It will fail.

Screen Shot For help.

Then how can I access materialize css file. Because I am using Materialize Ui framework in my website.

But I have read also about

 <style amp-custom> </style>

SO AMP validate page suggest include inline css in amp-custom. But materialize css is so long. It will break in some mobile browsers. Because https://github.com/ampproject/amphtml/issues/4555

If anybody have some idea then please share.

Answer 1

External Style Stylesheets are forbidden in AMP. You must include the CSS declaration self (up to 10.000 lines) between. This is for save time by additional network request and blocking rendering.

<style amp-custom>
...
</style>

Answer 2

currently there is no support for external css in Accelerated mobile pages. Although you can use inline css which was not allowed earlier. So you have to compromise with the css.