AMP with Ruby on Rails : Impossible to use a a Google Font

Question

I am implementing AMP pages on my Rails app. However I can't get my font to work. It raises this error on the Google Search Console :

"CSS syntax error in the "amp-custom style" tag. Incorrect declaration." Ligne 14:63 quot;Raleway", sans-serif}.banner{color:white;tex...

This is my application.amp.erb

<!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>`

And the beginning of my application.scss that I import for my AMP views which triggers the error on the Google Console :

body {
  font-family: "Raleway", sans-serif;
}

I tried everything, @font-face included, but nothing worked.

However, according to the official documentation (https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts) the link syntax should work with Google Fonts which is obviously a white-listed font provider allowed by AMP.

Please also provide the parsed html response which the browser gets. — Ashish
– Ashish, Commented May 28, 2019 at 12:16
the error you've shared is not full / complete, can you please share the full error message and the css codes, (as the error is in your css code) — Towkir
– Towkir, Commented May 29, 2019 at 6:39
Take help from playground.amp.dev/?url=https://preview.amp.dev/documentation/… I am not able to debug it as it is in ruby n rails. If you can share any page without ruby n rails code, I can help you. — Nisarg
– Nisarg, Commented May 29, 2019 at 9:44

Bman70 · Accepted Answer · 2019-06-01 06:45:57Z

A couple of things about the @font-face method.

The @font-face line has to be the FIRST line in your CSS stylesheet. Put all fonts imported this way at the top of the stylesheet.
It can be tricky linking to Google URLs, because Google gives a different URL for every browser when you get the actual font path. Raleway in Safari on my new MacBook gets the new woff2 format:

url('https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2') format('woff2');

Use a different computer and Google serves up an older woff font: url('https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0ISQ.woff) format('woff');

These will work, if your browser happens to be the one you were using when you got the font link, or equivalent. I couldn't get @font-face to work with the link in your HTML head: href="https://fonts.googleapis.com/css?family=Raleway:400,600&display=swap". It seems to need a link to the actual font file, whether .ttf or .woff or .woff2.

The surest way is probably to download the font from Google, and use @font-face with the actual path to the font residing with the rest of your Rails application assets. Something like:

<style type = "text/css">
@font-face {
font-family: 'Raleway Regular';
src:url('/app_assets/Raleway/Raleway-Regular.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
}

body {
font-family: 'Raleway Regular';
}
</style>

(I just put the style tags to demonstrate that nothing can go before the @font-face line in the stylesheet.)

To download, go to the Raleway font at Google Fonts. Select it with the red plus sign, then open the menu at the bottom of the page. Click the download arrow:

The downloaded folder will contain 18 different style of Raleway, from Raleway-Regular.ttf to Raleway-BlackItalic.ttf to Raleway-Thin.ttf. You can use only the regular style like I did, or link them all in their own @font-face tags at the top of the CSS page.

Toxi · Accepted Answer · 2019-05-31 21:14:06Z

0

Try to import your font directly into your css file:

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

then you can create a class for this font or use it directly in body style:

.raleway {
    font-family: "Raleway", sans-serif; /* for set this font on every element you want by using this class
}
/* or in body style: */
body {
    font-family: "Raleway", sans-serif;
}

Greetz Toxi

answered May 31, 2019 at 21:14

Toxi

1095 bronze badges

Collectives™ on Stack Overflow

AMP with Ruby on Rails : Impossible to use a a Google Font

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related