Using FREE Google Fonts

August 24, 2010 · 0 comments

in CSS,UI Design,Web Design

For those with the sweet tooth for the beautiful letterforms, the link below is sure to satisfy you. Google has released a free set of beautiful fonts for your perusal. I have used the Droid Serif and Droid Sans in my web site. Here is the CSS code snippet you can use right away to use the Droid sans and serif fonts in your own designs.

Embedding Droid Serif

@media screen {
    @font-face {
      font-family: 'Droid Serif';
      font-style: italic;
      font-weight: normal;
      src: local('Droid Serif'), url('http://themes.googleusercontent.com/font?kit=cj2hUnSRBhwmSPr9kS5895bd9NUM7myrQQz30yPaGQ4') format('truetype');
    }
}
@media screen {
    @font-face {
      font-family: 'Droid Serif';
      font-style: italic;
      font-weight: bold;
      src: local('Droid Serif'), url('http://themes.googleusercontent.com/font?kit=c92rD_x0V1LslSFt3-QEps5gzdOPyAFVZA8FnZ4sZC0') format('truetype');
    }
}
@media screen {
    @font-face {
      font-family: 'Droid Serif';
      font-style: normal;
      font-weight: bold;
      src: local('Droid Serif'), url('http://themes.googleusercontent.com/font?kit=QQt14e8dY39u-eYBZmppwf5Jgr8ufe5A6KahQF76Xmg') format('truetype');
    }
}
@media screen {
    @font-face {
      font-family: 'Droid Serif';
      font-style: normal;
      font-weight: normal;
      src: local('Droid Serif'), url('http://themes.googleusercontent.com/font?kit=70P0G8gxVDIV6F9om0DsKg') format('truetype');
    }
}

Embedding Droid Sans

@media screen {
    @font-face {
      font-family: 'Droid Sans';
      font-style: normal;
      font-weight: normal;
      src: local('Droid Sans'), url('http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g') format('truetype');
    }
}
@media screen {
    @font-face {
      font-family: 'Droid Sans';
      font-style: normal;
      font-weight: bold;
      src: local('Droid Sans'), url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMVtXRa8TVwTICgirnJhmVJw') format('truetype');
    }
}

Google Font Directory – http://code.google.com/webfonts

Previous post:

Next post: