Google Fonts on Heroku

I just installed some new google fonts for www.versioneye.com. Droid Sans and Droid Serif. Usually all you have to do is to add something like this into your css file:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

That worked fine for me on my localhost. Unfortunately it didn’t worked out after I deployed everything on Heroku. I did some research, but I still don’t know why it didn’t worked.

I decided to download the fonts and to deploy the fonts together with the application. I wanted to deliver the fonts in 3 different formats. Unfortunately I was only able to download the ttf format of the font. I just this website to convert it to some other formats:

http://www.font2web.com/

And I changed my CSS file and used this code here to add the fonts:

@font-face {
 font-family: 'Droid Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Droid Sans'), local('DroidSans'), 
 url('/fonts/DroidSans.eot?#iefix') format('embedded-opentype'), 
 url('/fonts/DroidSans.woff') format('woff'), 
 url('/fonts/DroidSans.ttf') format('truetype');
}

Know it is working fine.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s