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.

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.

Free Font – Mank Sans

Mank Sans is a thin sans-serif font with a modern flavor. It’s available in four weights: Regular, Italic, Medium, and Medium Italic. Download it for free from dafont.com.

Sorry for the lack of posts lately, I’ve been busy away from the internet life. I’m also heading down to Cancun for a week on Friday! I’m not bringing the laptop so there won’t be any updates next week. However, I will try and leave you with a bunch of new content before I leave. Can anyone recommend anything good to do while in Cancun?

Free Font – Petit Latin

Petit Latin is a quirky little, modern serif font available for free download from moorstation.org.