Menu
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"
731
To self-host, you need to download the fonts and write the appropriate @font-face CSS rules. Instead of doing this myself, I came across an excellent tool to streamline this process: google-fonts-helper. It holds the entire Google Fonts catalog.
Step 1: Download the Google Fonts TTF Files Google makes all the TTF files for its fonts fairly accessible. I recommend that you go to the GitHub project “Google Font Directory” and download the zip file or the tarball, and select the fonts you want. The page also has instructions for updating the fonts.
While there is not a mainstream CDN for all the formats, you can use http://google-webfonts-helper.herokuapp.com to download the font files and host them yourselves.
No, all Google Fonts are open source and are without cost.
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.
166
Simply use HTTPS instead of HTTP:
<%= stylesheet_link_tag "application", 'https://fonts.googleapis.com/css?family=<font_name>', :media => "all" %>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
