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, these styles are only supported by Safari and Chrome.

Here’s What The CSS Looks Like

The first step is to declare a text color, I’ve picked red here. Next, we use the text-stroke property to assign a color (black) and weight (1px). For this example, I’ve created a class called .stroke.

.stroke {
 color: #c00; /* text color */
 -webkit-text-stroke: 1px #000; /* stroke color and weight */
}

Here’s What It Looks Like

Make sure you check out the Cardeo Minimal HTML Email Template.

The text-stroke Property Explained

Here’s a breakdown of the values for the text-stroke property.

• The first value is the stroke weight measured in pixels
• The second value is the stroke color

Using Transparency

If you’d like to make the text fill transparent, you can do so by using the text-fill-color property. For this example, I created a second class called .stroke-transparent.

.stroke-transparent {
 -webkit-text-stroke: 1px #000;
 -webkit-text-fill-color: transparent;
}

Here’s What It Looks Like

Support Files

That’s it, that’s all. Check out the Live Demo to see it in action, or Download the 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

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

Legistyles.com: Free Type Styles for NewsNetReader

Legistyles.com is a new website offering free type styles for the NewNetWire RSS Reader. Here’s a little of what they have to say:

LegiStyles are a series of custom styles for the award-winning RSS reader NetNewsWire. Much attention has been paid to the design and typography of the styles to improve legibility and readability, and to enhance the overall reading experience.

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.