Heroku and Google Fonts

Question

Why doesn\'t embedding google fonts work on Heroku?

For example:

\' rel         


        

Answer 1

Change link to HTTPS

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

Answer 2

Simply use HTTPS instead of HTTP:

<%= stylesheet_link_tag "application", 'https://fonts.googleapis.com/css?family=<font_name>', :media => "all" %>

Answer 3

A better approach is to leave off the protocol altogether and just start with '//'. The correct protocol (HTTP or HTTPS) will be used depending on server context

<link href='//fonts.googleapis.com/css?family=some_kinda_font' 
rel='stylesheet' type='text/css'>

Answer 4

Or you can use the url without specifying the http protocol

<%= stylesheet_link_tag "application", '//fonts.googleapis.com/css?family=<font_name>', :media => "all" %>

With this both http and https work.

Answer 5

I discovered that heroku sets security parameters for using the google fonts url. It wants to use the https instead of plain http. Here's what worked for me.

Instead of:

@import url('http://fonts.googleapis.com/css?family=Oswald:400,700,300');

I used

@import url('//fonts.googleapis.com/css?family=Oswald:400,700,300');

If you notice the second line leaves out the http, allowing heroku to use https. I'm assuming you could probably use https in the link if you wanted to.

Answer 6

The @import generates blocking CSS, which causes a slower page load. Using an extra DNS lookup for your fonts makes this even worse. To improve performance I would swap @import with @font-face and host the fonts locally/on your own web server. You can download the fonts using the Google Fonts download helper.

IMPORTANT NOTE - Putting your company name in front of something that is released for free to the community is uncool (Google Fonts). Using this to create a 'free service' to track the behaviour of people online is even more uncool. Most people call this stealing (plagiary) and snooping. We tell our kids that this is bad. We (as web developers) should not facilitate this. We should NOT feed Google Fonts to our visitors. Just download these free fonts and serve them from your webserver. They (should) have nothing to do with Google. If you are the owner of any of these fonts, please prevent Google from hosting them. Stop facilitating mass surveillance. Thank you.