Live Demo

Browser Support

Currently these styles are supported by Safari, Firefox, Chrome, and Opera.

Here’s What The CSS Looks Like

The first step is to setup the @font-face selector with the font you want to use. For this example, I’m using the free font Aller Display. The font-family property declares the name/value for your custom font. The src property is the link to the font file on your server, which you have already uploaded.

@font-face {
 font-family: aller-display;
 src: url('aller-display.ttf');
}

Now we’ll setup it up so every <div> in your document will use Aller Display. Make sure the font-family value matches the one you setup under the @font-face selector. In this case it is aller-display.

@font-face {
 font-family: aller-display;
 src: url('aller-display.ttf');
}

div {
 font-family: aller-display;
 font-size: 2em;
}

Adding the HTML

The last thing we need to do is add the HTML, which is pretty basic.

<div>this is a custom font named aller display</div>

Here’s What It Looks Like

A Word On Copyright

Make sure you check the license for a font before you use it. Many fonts are not currently licensed for web use. The safest policy is to just use free fonts. There’s a great collection over at dafont.com.

Support Files

That’s it, that’s all. Check out the live demo and download the source files below.

Live Demo

Download Source Files

Browser Support

Currently, the text-shadow property works in Safari, Firefox, Opera, and Chrome.

Adding shadow to your type

A shadow is added to your type using the text-shadow property. In the example below, you’ll notice 3 pixel values. The first controls horizontal offset, the second controls vertical offset, and the third controls blur. The fourth value is the shadow color, which is set using a hex number.

Here’s what the CSS looks like

h1 {
 text-shadow: 2px 2px 2px #000;
}

Here’s what it looks like

This is a text shadow

Like I mentioned in my intro, this one is pretty easy to implement into your designs,. I’d suggest playing around with the horizontal, vertical, and blur values to see what you can come up with.

Features:
» Font Manager to easily upload new fonts to wordpress
» Style Management – allows an unlimited number of styles to be created.
» Font shadow options within the style manager(Requires PHP5 & ImageMagick).
» Browser caching is enabled, reducing load time.
» Cache Management.
» Image replacements are SEO compatible.
» Easy text replacement options for post titles, page titles, widget titles, blog name and blog description.

» Download the AnyFont Plugin

Free Font: La Santisima Muerte

Radical 80′s Skateboard inspired font by Hydro74.

» Click here to download it from blackinblackapparel.com

Free minimal WordPress theme: Manifest

Features:
» Valid XHTML markup
» Microformat support
» 404 page
» Archives template
» Links template
» Google ad support
» IE6 unsupported
» Some webkit visual candy

» View Demo
» Download

Agrafa Hairline Character Set

Agrafa Hairline Details

Agrafa Hairline is a modern titling font. Great for use on a poster or flyer design. Download Agrafa Hairline from MyFonts.com

New Free Fonts Website FontSquirrel.com

FontSquirrel.com is a new free fonts website aimed at designers. Currently they are offering 300+ fonts for download. Definitely worth checking out, here’s a little of what they have to say:

Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We’ve done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format.

Free Font: Megalopolis

A cool titling font from smeltry.com. Pick up Megalopolis Extra for free!

Free Font: Lavoisier

A free sans serif font from HaikuMonkey.net.