Friday, September 10, 2010

Google Font Directory

I have been using Google Font Directory for Sordina Productions' fonts.

Not only does this give a reasonably unique look to the site and the blog, but the process of using the fonts is incredibly intuitive. Nevertheless...

Custom Fonts on Blogger


To use Google Font Directory fonts on your website, or in this case, on your blogger blog -

Acquiring the font CSS:
  • Find a font you like at http://code.google.com/webfonts
  • Click the font example
  • Click "Get the code"
  • Copy the "href" attribute from the <link> example
  • Paste this into your browser's URL bar
  • Copy the code displayed

Integrating them into your blog:
  • Click "Design" on your blogger blog
  • Click "Template Designer"
  • Click "Advanced"
  • Click "Add CSS"
  • Paste the code you copied here
  • Use CSS selectors to apply the font family to various blog elements as shown below

Here is a snippet for your blog title:
@font-face {
  font-family: 'IM Fell English SC';
  font-style: normal;
  font-weight: normal;
  src: local('IM Fell English SC'), url('http://themes.googleusercontent.com/font?kit=h3Tn6yWfw4b5qaLD1RWvzwewtCADHBbarjY1nYW8lZc') format('truetype');
}
h1 { font-family: 'IM Fell English SC', arial, serif !important; }

I've found no issues with using this technique in all the browsers I have tested with. Just make sure that you list some fall-back fonts so you don't get caught out when godzilla destroys the Google font servers.

No comments:

Post a Comment