Heroku and Google Fonts

问题:

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"

回答1:

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.

回答2:

Simply use HTTPS instead of HTTP:

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

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

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

回答5:

Change link to HTTPS

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

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