Heroku and Google Fonts

Question

Why doesn't embedding google fonts work on Heroku?

For example:

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

EDIT: turns out it works, one of my chrome extensions was blocking it as an "insecure script"

score 44 · Accepted Answer · edited Aug 29 '15 at 21:54

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.

score 13 · Answer 2 · answered Oct 12 '13 at 11:50

13

Simply use HTTPS instead of HTTP:

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

answered Oct 12 '13 at 11:50

Yosep Kim

2,931
22
23

Jiro Sasamoto · Answer 3 · 2014-03-14T07:29:40.060

3

Change link to HTTPS

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

edited Mar 14 '14 at 07:29

answered Mar 14 '14 at 07:23

Jiro Sasamoto

41
3

score 2 · Answer 4 · answered Jun 17 '14 at 15:46

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

score 2 · Answer 5 · answered Jul 05 '14 at 02:28

2

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.

answered Jul 05 '14 at 02:28

Khanetor

11,595
8
40
76

Mr. Hugo · Answer 6 · 2019-01-11T08:18:28.640

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.

Heroku and Google Fonts

6 Answers6

Linked