为什么我的网站没有使用我指定的字体？无法访问字体？答案

【问题标题】：Why is my website not using the fonts I specified? No access to the font?为什么我的网站没有使用我指定的字体？无法访问字体？
【发布时间】：2015-06-13 18:01:10
【问题描述】：

我正在使用 Rails 并指定我的字体如下：

#Application.html.erb includes in the head:
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

#One of the stylesheets includes:
body{ font-family: 'Indie Flower', sans-serif; }

我也在使用 Bootstrap gem（它可能会覆盖上面的内容？）。

但是，在开发服务器上，我的站点不使用我指定的字体。我认为是 Helvetica。我做错了什么？

我还与检查员进行了核对，检查员提供了以下信息：

对于body 表示font-family: "Indie Flower",sans-serif;。
例如，对于下一个 div，它表示相同。
div 中的h3 表示font-family: inherit;。
h5 中的 div 也是如此。
对于p，在div 中显示font-family: "Indie Flower",sans-serif;

所以你会认为字体确实是 Indie Flower，但事实并非如此。我还使用另一种字体对其进行了检查，所有文本再次显示为我认为是 Helvetica 而不是我指定的字体。

我做错了什么？

更新：application.html.erb：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <%= render 'shared/shim' %>
</head>
<body>
  <%= yield %>
</body>
</html>

我也尝试过将字体向上移动到样式表上方，但这没有任何区别。

还有application.css:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require bootstrap-datepicker3
 *= require_tree .
 *= require_self
 */

更新 2： 从 application.html.erb 中删除字体确认它没有显示正确的字体。在检查器中，它指定了正确的字体。但是，它实际上并没有使用该字体。同样，我可以在 css 中指定一个具有随机名称的字体系列，它显示的字体与现在相同。

因此，我的印象是它已在 css 中正确指定，但应用程序无法访问该字体，因此只能使用 verdana。也许应用程序无法加载字体？但为什么会这样，或者为什么它不能访问字体？我尝试了不同的谷歌字体，并相信它们的来源每次都在application.html.erb 中正确指定。怎么办？

【问题讨论】：

代码是在bootstrap下面设置字体之类的吗？
请发布您的 application.css。
我在原帖中添加了application.css。
通过在其中一个 css 文件中添加两行来包含引导程序：@import "bootstrap-sprockets";@import "bootstrap";。 Gemfile 包括gem 'bootstrap-sass', '3.3.4.1'。
尝试创建一个自定义的 .css 文件（如 'test.css' 并将其包含在您的 application.css ( *= require test ) 中，但请确保在任何引导行之后添加它，显然，请确保它包含 css 以使用您的字体。我认为您正在查看管道加载顺序问题。

标签： html css ruby-on-rails ruby-on-rails-4 fonts

【解决方案1】：

试试这个：

body{
    font-family: 'Indie Flower', cursive;
}

【讨论】：

那么我确实得到了一种不同的字体类型，但不是我正在寻找的那种。我还用另一种字体尝试了cursive。再一次，字体与font-family: 'Indie Flower', cursive; 完全相同。所以cursive 确实有效果，但它似乎没有应用字体系列，因为无论我使用哪种字体系列，它都显示相同。
您目前使用的是什么浏览器？如果您尝试使用其他浏览器会怎样？
我目前使用的是最新的 Firefox。我也试过 Chrome，但结果是一样的。

【解决方案2】：

我找到了原因。字体的来源需要是https 而不是http。所以：

<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

这很棘手，因为网络上提供的所有要包含在您自己的应用程序中的链接都使用“http”。

【讨论】：