HOWTO: Use Google Fonts

DanjaVasiliev 2015-03-10 18:02:40 UTC #1

here is a small example, modify to your needs:

http://danja.hotglue.me/google-fonts-example

tame 2015-04-23 18:07:16 UTC #2

Hello!
Thank you for your example. I was trying to use it and it works for the example font that you used - 'Caesar Dressing'.
However, when I try to do the same with other fonts i find in http://www.google.com/fonts, for an example I tried - Special Elite - http://fonts.googleapis.com/css?family=Special+Elite, but many others too, it doesn't work.
Do you have any idea why?
I also didn't know why you used the word 'serif' in your code, in the font assignment line -
font-family: 'Caesar Dressing', serif;
(when I erase it, your example still works..) and thought that maybe i should add a different word there, but tried many things and nothing works...

Any help would be highly appreciated!
Thanks...
T.

tame 2015-04-24 14:24:49 UTC #3

just to add another piece of info that I now noticed -
if I search for the 'Ceasar Dressing' font, used in the example, in the google fonts web, then I get this -
http://fonts.googleapis.com/css?family=Caesar+Dressing
which is a different code from that used in the example, in that it used a different url, to the woff2 format, instead of the url to the woff format used in the example. When I change to this it doesn't work. So it seems that hotglue likes more the woff format. however, in http://www.google.com/fonts I find only the woff2 urls that don't work.
So what I did was to google - themes.googleusercontent.com, which was the initial of the url that worked, with the name of the font i looked for, and i found this cool source -

github.com

cloudfour/cloudfour-workshop-zombie/blob/master/assets/styles/common.scss

@mixin ghetto-clearfix {
  &:after {
    content:            ' ';
    display:            block;
    height:             0;
    clear:              both;
  }
}

@font-face {
  font-family: 'Nosifer';
  font-style: normal;
  font-weight: 400;
  src: local('Nosifer'), local('Nosifer-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifer/v2/7n0ZFTD4V11-kkhjuR2UIwLUuEpTyoUstqEm5AMlJo4.woff') format('woff');
}

@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: bold;

This file has been truncated. show original

I used the url from there and.... IT WORKS!

I'm very proud that I hacked it, but I guess that it would be nice if we find the official way to use the woff format of fonts from google...

Thanxxxxxxx