Adding google fonts to Rails application

Question

I'm trying to add google fonts to my Rails 5.2 application and I can't figure out why it doesn't work/what is missing:

i added the following lines in application.scss file :

@import url('://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');

body {
  padding-top: 70px;
  font-family: 'Lato', sans-serif;
}

Before using @import in application.scss i tried to add in application.html.erb the following line in the head

<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet">

Thanks for any help!

Sleet

``` font-family: 'Lato', sans-serif !important; ``` it made the job, but if there is a better way to solve it? – Sleet

can you check console for possible errors in your browser while running & viewing your app? – Edmundedmunda

no errors in the console – Sleet

Answer 1

It seems the first line in the application.scss, there's a colon ( before //fonts, after url(' ) that causes error. Removing this fixes it:

@import url('//fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');

body {
  padding-top: 70px;
  font-family: 'Lato', sans-serif;
}

No need to add additional line into your application since it'll be compiled in your scss file.

Edmundedmunda

Answer 2

Alternative way is to host font(s) within the app for an extra tiny bit of performance enhancement. I have tried the steps below on a Rails 6 app:

1. Find open source font from: https://fontsource.org/fonts

• for this example lets use roboto: https://fontsource.org/fonts/roboto

2. Depending on which package manager you are using, do either:

• yarn add @fontsource/roboto or npm install @fontsource/roboto

3. In app/javascript/packs/application.js add this internal import:

• import "@fontsource/roboto";

You should now be able to use the font in your stylesheets. Repeat the same steps for any other additional open source font.

Pastoralist