Anyone know how I can include a google fonts style sheet in my rails app? I have tried adding
<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200'
rel='stylesheet' type='text/css'>
Into my application.html.erb but that doesn't do anything
I was struggling with this one, because I had a line like this:
<%= stylesheet_link_tag 'application',
media: 'all', 'data-turbolinks-track' => true %>
It's hard to tell where to put your link at a first sight.
That you wanted to do is to place your stylesheet link AFTER 'application', divide it by commas. Like this:
<%= stylesheet_link_tag 'application',
'https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin',
media: 'all', 'data-turbolinks-track' => true %>
Then use it in your stylesheet as usual with font-family property.
Of course, we can @import it in a SASS, or do it as usual with a link tag, but that's just an another way and it's should be mentioned here.
Simply add the code provided by google to the top of your application.scss file.
@import url('https://fonts.googleapis.com/css?family=Quicksand|Rubik');
please note rails will provide you with application.css file out of the box with require statements. remove these and rename application.scss
remember to add @import filename; for any other custome scssfiles in the folder
application.html.erb. Better yet you can just make a fonts.scss, importing all the fonts you need and then include it in application.scss so you have yourself a little font manifestIf you add the font via @import as shown in other comments, under @import Bootstrap in application.css, the asset pipeline compiles it into the application stylesheet. If you put it in the head of your html as a link, it gets added as a separate stylesheet which slows down the page loads. You can add the @import code just as Google provides from the fonts you choose on the Google font site.
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<!-- Google font -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
............
application.css
body {
font-family: 'Ubuntu', sans-serif;
}
I use it this way, maybe this will clarify.
UPDATED
Try to remove your scaffold.css.scss! Or just open and comment out all body part of CSS of this file.
I believe the most integrated way is to edit app/assets/views/application.html.erb and change:
<%= stylesheet_link_tag 'application.css' %>
to
<%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Catamaran','application.css' %>
<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200'
rel='stylesheet' type='text/css'>
body{
font-family: "Raleway", Arial, sans-serif;
}
Are you sure you are putting <link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'> this to your desire layout?
And in your respective <layout>.css stylesheet, did you putted font-family:Raleway;?
Make it sure. Thanks.
