I am currently in the process of implementing AMP pages on my Rails application. Unfortunately, I am facing difficulties with getting my font to display correctly. The Google Search Console is returning the following error message:
"CSS syntax error in the "amp-custom style" tag. Incorrect declaration." Line 14:63 "Raleway", sans-serif}.banner{color:white;tex...
This is the content of my application.amp.erb file:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<%= url_for(format: :html, only_path: false) %>" >
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600&display=swap" rel="stylesheet">
<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>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
<% if Rails.application.assets && Rails.application.assets['amp/application'] %>
<style amp-custom>
<%= Rails.application.assets['amp/application'].to_s.html_safe %>
</style>
<% else %>
<style amp-custom><%= File.read "#{Rails.root}/public#{stylesheet_path('amp/application', host: nil)}" %>
</style>
<% end %>
</head>
<body>
<amp-font
layout="nodisplay"
timeout="3000"
font-family="Raleway">
</amp-font>
<div class="amp">
<%= render "shared/navbar" %>
<%= yield %>
</div>
</body>
</html>`
Additionally, here is a snippet from my application.scss file which is being imported for my AMP views and seems to be causing the issue according to the Google Console :
body {
font-family: "Raleway", sans-serif;
}
I have attempted various solutions including @font-face, but unfortunately nothing has resolved the problem. However, as per the official documentation (), the link syntax should theoretically work with Google Fonts since it is an approved font provider by AMP.