font not loading properly with asset pipeline

Question

In development everything seems to work fine. However, some fonts on production aren't loading properly.

.navbar-brand {
  font-family: 'Lobster', cursive;
  font-size: 26px;
}

I believe Lobster font is what is not loading properly. Here is the top of my layout file:

homepage.html.haml:

= stylesheet_link_tag "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Lobster"
= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Oswald"
/ HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries
/[if lt IE 9]
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

and when it renders on production:

<link data-turbolinks-track="true" href="/assets/homepage-2e981940003b710365e4aaa4ebad6972.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application-c327f4188c82f7df44984ab92143cc09.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" media="screen" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Lobster" media="screen" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Oswald" media="screen" rel="stylesheet" />

is it a problem that the fonts are loading after the asset css files? what am i doing wrong here.

Answer 1

I see you are loading your <script> through https while the offending font is loaded in http . Make sure all of your requests are using the same protocol, never mix and match. Try:

= stylesheet_link_tag "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
= stylesheet_link_tag "//fonts.googleapis.com/css?family=Lobster"
= stylesheet_link_tag "//fonts.googleapis.com/css?family=Oswald"

which is protocol agnostic, so if you are using https , it will be loaded via https , same if you are testing with a simple http server or even a static file:// .