0

Icons not showing when amp page is served by google amp CDN which is - https://www.google.com/amp/s/siachenstudios.com/yg-drops-new-protest-track-ftp/%3famp

but icons are working properly if my domain serves the amp page - https://siachenstudios.com/yg-drops-new-protest-track-ftp/?amp

How to fix icons on google amp cache domain?

Shryansh
  • 1

1 Answers1

0

I Checked for both sites and observed when AMP site loaded from google cache font-family - mobile-theme.ttf is failing with 404.

Font-family src urls are changing obviously when loaded from cache

AMP page font family when loaded from cache -

@font-face{font-family:"mobile-theme";
src:url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.eot?9');
src:url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.eot?9#iefix') format("embedded-opentype"),
url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.woff?9') format("woff"),
url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.ttf?9') format("truetype"),
url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.svg?9#mobile-theme') format("svg");
font-weight:normal;
font-style:normal
}

Which is returning 404.

AMP page font-family when loaded from url without cache - 

@font-face{
font-family:"mobile-theme";src:url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.eot?9");
src:url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.eot?9#iefix") format("embedded-opentype"),
url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.woff?9") format("woff"),
url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.ttf?9") format("truetype"),
url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.svg?9#mobile-theme") format("svg");font-weight:normal;
font-style:normal
}

I suggest if you using your local fonts other than fonts suggested by AMP.

AMP suggested font families - https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/

you should use amp-font component to add other fonts. refer - https://amp.dev/documentation/examples/components/amp-font/

Rohit Ambre
  • 921
  • 1
  • 11
  • 25