Moderno has a beautifully simple, yet exquisite design with many subtle nuances that make it stand out from the crowd. An optional two or three column layout with an infinite number of color and font possibilities make it easy to create a truly original look for your Web site. Go crazy placing your favorite widgets in up to three widgetized locations. Select a standardized Web font or get a little more creative with one of ten pre-installed @font-face kits.

Go to Themes by bavotasan.com for more info.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Then you can use the font like this:

<style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
</style>

Check out a list of available font in the font directory. They are all licensed for commercial and non-commercial use.

First, you need to download some @font-face kits. I like to use kits supplied by Font Squirrel because they have an awesome library and all their fonts are 100% free for commercial use. For this example I’m going to use Riesling.

Once you have the files downloaded you need to add them to your Web site. Create a folder named “fonts” and place the riesling.eot and riesling.ttf files into the folder. Upload that to your site, in to the same directory as your style sheet.

Now open your style sheet and add the following:

/*
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * @vendor:     Bright Ideas
 * @licenseurl: http://www.fontsquirrel.com/license/Riesling
 *
 *
 */
 
@font-face {
	font-family: 'RieslingRegular';
	src: url('fonts/riesling.eot');
	src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}

Everything is in place for you to use Riesling as a font on your Web site. Just add it to your CSS like you would any other font-family:

h1 {
  font-family: 'RieslingRegular', Arial, sans-serif;
}

The one thing you need to realize when using @font-face kits is that only modern browsers recognize it.

This is a sample paragraph that uses @font-face kits and CSS. If you see this paragraph in Riesling then your browser supports @font-face. If not, you might need to upgrade your browser to take advantage of @font-face kits.

I needed to manipulate the Tag Cloud widget so that the size of the largest font was not too big. It only took going in and changing one line in the widgets.php files. I wouldn’t suggest doing this unless you are somewhat comfortable with messing around with your code.

File to manipulate: wp-includes/widgets.php

Find:

wp_tag_cloud(); // at around line 1372

Change to:

wp_tag_cloud('smallest=10&largest=14&number=25&orderby=name');

“smallest” is the size of the smallest font you want
“largest” is the size of the largest font you want
“number” is the amount of tags you want to appear
“orderby” is how the orders of the tags will be shown