Lately, all of that has changed. Many modern browsers now support font embedding which enables web designers and developers to use seemingly any font they want on their website. However, all is not perfect, as Internet Explorer requires a different format (eot) than Webkit or Firefox (otf or ttf). There is also the ongoing battle in the legality of font embedding, as it requires the downloading of a licensed font to a client’s machine, even though they haven’t paid for the font.

This brings another problem: font embedding requires the client to download the entire font file, some of which can reach into the hundreds of kilobytes. Even with widespread broadband, this can slow page loading or flash fonts in a different font-face until the custom font downloads.

Bring along font embedding services. These services tackle the problem of cross-browser compatibility by supplying all the necessary style sheets. They also cover the legal angle by using fonts specially licensed for use on the web. And they help cut down on the file size problem by using compressed files and delivering them on a lightning fast CDN. Using a font embedding service also opens up the possibility that a visitor has already downloaded the file once, which will not require them to download the font again. However, these advantages come with one disadvantage: price. Nearly all of these services require a monthly or yearly fee to use their service. Some do come with trials or a limited selection of fonts, but to truly get the most out of the service you’re going to have to pony up.

The Services

Google Font Directory
Pros: Super quick, Free, Most popular
Cons: Very Limited Selection of Fonts

Typekit
Pros: Popular, Free Trial (limited fonts and uses), Large Selection, Relatively Cheap
Cons: Pay for service

Webtype
Pros: Professional fonts, backed by font foundries
Cons: Pay per font for licensing gets expensive quickly

WebINK
Pros: Monthly Pricing, Neat Font Explorer Tool
Cons: Only allowed a maximum of 4 websites

If you’re a web designer or developer who will be using custom fonts on many client sites, Typekit and Google are your best option simply because they are the most generous in how you can use their fonts. If you’re just looking to spice up your own blog it pays to check out each service for the unique fonts they offer.

A great resource to tell what is and isn’t going to work in various browser versions is When Can I Use. WCIU provides a great interface to check up on browsers which make up 99% of the browser market. WCIU also gives a good overview of if you can safely use a property today or if you should implement backup methods.

For more reading on progressive enhancement check out Onextrapixel’s writeup.

<p>This is a paragraph in a page.</p>

The span element is inline. Conversely the p element is a block element.

Some important distinctions:

Inline elements can be placed inside of other inline elements, as well as inside block elements. Inline elements also can not usually have a set width or height since doing so would break the flow.

Block elements cannot be placed inside of inline elements, however they can be placed inside other block elements. Block elements can have a specific width and height set.

Typical case:

<input type="text" name="fname" value="First Name" onfocus="this.value=''" />

Another example

This presents a couple of problems, the first of which is the fact that each input is supposed to have a label element associated with it so that screenreaders can correctly read and interpret the form. The second issue is that once the input focused, if the user tabs through the form quickly, they suddenly have no clue what to input into each field. Also, if the user goes back to edit the field, they lose their data that they had previously entered.

Luckily, with a little bit of jQuery we can clear up these problems. The first step is to add a label element to the input. The for attribute associates the label with the input of the same name, in this case “fname”.

<div class="input-wrapper">
<label for="fname">First Name</label>
<input type="text" name="fname" value="" />
</div>

You’ll notice I also added a div to wrap the input and label, which we will use to correctly position the elements. I also removed the default value and the onfocus event, as they will not be needed. Now a little CSS.

div.input-wrapper {
position:relative;
width:100px;
height:20px;
z-index:1;
}
div.input-wrapper label {
position:absolute;
top:2px;
left:4px;
z-index:3;
font-size:16px;
}
div.input-wrapper input {
position:absolute;
width:92px;
height:16px;
font-size:16px;
padding:2px 4px;
top:0;
left:0;
z-index:2;
}

The div is given a relative position so that the elements inside of it can be positioned absolutely relative to the div, rather than relative to the document. I gave it an arbitrary width and height; you will have to adjust for your needs. The label is then positioned absolutely. I like to pad my inputs so i mimicked the padding by positioning the label 2px from the top and 4px from the left. I gave the label a z-index of +1 to the input so that it will appear over the input. Lastly, the input is also positioned absolutely and then padded to fit the text size.

Now for the jQuery:

$("div.input-wrapper label").click(function(){
$(this).next("input").focus();
});

$("div.input-wrapper input").focus(function(){
$(this).prev("label").hide();
});

$("div.input-wrapper input").blur(function(){
var val = $(this).val();
if (val=="") {
$(this).prev("label").show();
}
});

The first block allows the user to click the label to focus the input. The second block takes place when the user actually focuses the element, and hides the label. You could also use animate() here to fade out the text, but I kept it simple. The third block will show the label again if a user leaves an input without any information in it, so they can easily see what belongs in each input.

This is a rough example, and there are a lot of tweaks you can do to enhance the usability as well as the user experience. let me know if you’ve used this or a similar trick!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML>

<div id="head">
 <div id="nav">
  <ul>
   <li>Link</li>
   ...
  </ul>
 </div>
</div>
<div id="content">
 ...
</div>
<div id="sidebar">
 ...
</div>

<header>
 <nav>
  Link
  ...
 </nav>
</header>
<article>
 ...
</article>
<aside>
 ...
</aside>

$(function() {