【问题标题】：Include Google Font in Rails App在 Rails 应用程序中包含 Google 字体
【发布时间】：2013-08-29 10:52:36
【问题描述】：

有人知道如何在我的 rails 应用程序中包含 google 字体样式表吗？我已经尝试添加

<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' 
rel='stylesheet' type='text/css'>

进入我的application.html.erb 但这无济于事

【问题讨论】：

在 application.html.erb 和 CSS font-family 中的 head 之间添加提供的链接：'Font Name', cursive;
可能你的字体 CSS 是 font-family: 'Raleway', sans-serif;
对不起 - 不明白你的意思！
澄清一下 - 我知道如何正常使用 CSS 和 Google 字体，但问题在于我使用的是 Rails
终于解决了这个问题，当然是我自己的愚蠢。这是导致问题的 css 文件的顺序，因此通过编辑 application.css 文件来超越顺序。

标签： css ruby-on-rails

【解决方案1】：

对于外部样式表，将其添加到您的布局 (application.html.erb)

 stylesheet_link_tag 'application', 'put any external link'

如果你使用
1) <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> 在轨道布局中

2)

在样式表中使用请求的网络字体为元素设置样式：

CSS selector {
  font-family: 'Font Name', serif;
}

或者元素本身带有内联样式：

你的文字

你有字体系列Tangerine

示例：--

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
   <style>
     body {
      font-family: 'Tangerine', serif;
      font-size: 48px;
     }
</style>
 </head>
<body>
  <div>Making the Web Beautiful!</div>
</body>
</html>

【讨论】：

再次澄清——我的问题不是如何使用 Google 字体——而是我如何在 Rails 应用程序中引用外部样式表
你可以访问任何外部样式表stylesheet_link_tag 'application', 'put the link of the external stylesheet'
感谢您的帮助，但由于某些未知原因，字体不会显示在我的 html 页面上！很奇怪，因为它们在我的旧 MAMP 设置上运行良好

【解决方案2】：

我一直在努力解决这个问题，因为我有这样一行：

<%= stylesheet_link_tag 'application', 
media: 'all', 'data-turbolinks-track' => true %>

第一眼就很难判断将链接放在哪里。

你想要做的是将你的样式表链接放在之后 'application'，用逗号分隔。像这样：

<%= stylesheet_link_tag 'application',
'https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin',
 media: 'all', 'data-turbolinks-track' => true %>

然后像往常一样使用 font-family 属性在样式表中使用它。

当然，我们可以在 SASS 中 @import ，或者像往常一样使用 link 标签，但这只是另一种方式，应该在这里提及。

【讨论】：

您的回答应该是公认的解决方案，因为这是 imo 的正确方法。

【解决方案3】：

只需将 google 提供的代码添加到 application.scss 文件的顶部即可。

@import url('https://fonts.googleapis.com/css?family=Quicksand|Rubik');

请注意，rails 会为您提供开箱即用的 application.css 文件和 require 语句。删除这些并重命名 application.scss

记得添加@import 文件名；对于文件夹中的任何其他自定义 scssfiles

【讨论】：

我认为这是最好的方法，字体不属于application.html.erb。更好的是，您可以创建一个fonts.scss，导入您需要的所有字体，然后将其包含在application.scss 中，这样您就有了一个小字体清单

【解决方案4】：

如果像其他 cmets 中所示通过 @import 添加字体，则在 application.css 中的 @import Bootstrap 下，资产管道将其编译到应用程序样式表中。如果你把它作为一个链接放在你的 html 的头部，它会被添加为一个单独的样式表，这会减慢页面的加载速度。您可以添加 @import 代码，就像 Google 从您在 Google 字体网站上选择的字体中提供的一样。

【讨论】：

这个提示非常非常重要！感谢分享！

【解决方案5】：

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

应用程序.css

body {
 font-family: 'Ubuntu', sans-serif;
}

我用这种方式，也许这会澄清。

更新

尝试删除您的scaffold.css.scss！或者只是打开并注释掉该文件 CSS 的所有正文部分。

【讨论】：

嗯 - 由于某种原因，这对我不起作用。我查看了源代码，参考文献在那里，但没有效果！
application.css 是一个清单文件，不应包含样式。

【解决方案6】：

我认为最集成的方式是编辑 app/assets/views/application.html.erb 并更改：

<%= stylesheet_link_tag 'application.css' %>

到

<%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Catamaran','application.css' %>

【讨论】：

【解决方案7】：

把它放在 application.html.erb 的 head 部分

<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' 
rel='stylesheet' type='text/css'>

将其粘贴到您的 css 文件中：

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

【讨论】：

这行得通，但似乎不是很正常..？我怎么能重新考虑这个？

【解决方案8】：

您确定要将<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'> 这个放到您想要的布局中吗？

在您各自的<layout>.css 样式表中，您是否输入了font-family:Raleway;？

确定。谢谢。

【讨论】：