CODEWITHSUNDEEP
htmlcssruby-on-railsamp-htmlgoogle-fonts
Rémi JUHE
Rémi JUHE

Reputation: 405

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

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.

Upvotes: 4

Views: 440

Answers (2)

Bman70
Bman70

Reputation: 773

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

  1. 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.

  2. 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:

enter image description here

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.

Upvotes: 3

Toxi
Toxi

Reputation: 109

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

Upvotes: 0

Related Questions