Graças à nova versão do CSS, o CSS3, é possível desenvolver um projeto HTML com fonte personalizada, diferente ou até própria a determinando na folha de estilo utilizando a nova propriedade do CSS, o font-face. Também saberemos se é possível ou não determinar anti-alias (ou antisserrilhamento) na fonte e renderizar seus formatos para cada navegador.

Senti que falei como se o @font-face fosse uma "NOVA PROPRIEDADE DO WEB DESIGN". Mas a verdade é que ela existe desde 2007 e os navegadores/browsers só foram ter suporte para a propriedade bem depois disso, impedindo não só que designers utilizem a propriedade, mas sigam um padrão limitado de fontes. E quem é web designer sabe o que é ter que recorrer às imagens e/ou ao sIFR (Rich Accessible Typography for the Masses): técnica válida que utiliza Flash, Javascript e CSS, porém pesada e para mim, descartada.

Extensões
{Pois muitas vezes formatos são específicos.}
Algumas das mais usadas: .ttf: (TrueType) — .otf (OpenType) — .svg e .svgz (Scalable Vector Graphics) — .eot (Embed OpenType).

@font-face

{ Use tipografias em seu site que não estão instaladas no computador do visitante.}
Já pode abrir um novo documento CSS. No exemplo abaixo, o qual recomendo colar na sua folha de estilo para entender melhor, fica clara a utilização da propriedade. Vou utilizar o formato padrão, .ttf. Veja:

@font-face {
     font-family: Autodidatt;
     src: url(http://exemplo.com/fontes/Autodidatt.ttf);
 }

Agora vamos entender:

@font-face é o nome da propriedade; font-family define o nome da fonte; o atributo src (resource) aponta o endereço URL (src: url..) para o arquivo da fonte, que está entre parenteses: (http://exemplo.com/fontes/Autodidatt.ttf).

Lembrando que o nome da fonte pode ser o que você quiser.
Para utilizar essa fonte em nosso arquivo HTML, não há nada de novo. O HTML continua básico. Um exemplo, usando a fonte do código que foi usado no primeiro exemplo:
    h1 { font-family: Autodidatt, Arial; }
No caso, estou usando a minha fonte (Autodidatt) em um texto dentro de h1. E caso não funcionar — que é o caso dos usuários do Internet Explorer — ele vai exibir o texto em Arial, ou também para quando o sistema ou o navegador não ler o formato da fonte, mas isso tem solução (ao contrário dos usuários do IE). Só continuar lendo.

Acessibilidade
{Até para usar uma diferente tipografia a acessibilidade é necessária. Renderizaremos os formatos das fontes para todos os navegadores e sistemas.}
 Depois de entendermos o font-face e finalizarmos o nosso código, devemos renderizar a fonte pois nem todos navegadores lêem o mesmo formato de letra que o seu.

O código é simples:
    src: local('☺'), url('http://exemplo.com/fontes/Autodidatt.woff') format('woff'), url('http://exemplo.com/fontes/Autodidatt.ttf') format('truetype'), url('http://exemplo.com/fontes/Autodidatt.svg') format('svg');
Quem sabe ler vai entender o código. Ele só está lendo os formatos e executando as páginas, lendo todas e vendo o que vai "dar na telha". Você pode editar os códigos, adicionando novos formatos, tornando-o mais acessível.

O anti-alias é possível no CSS?
{ De uma vez por todas, o que já fez muitos voltarem a recorrer às imagens.}
Definitivamente, não. Nem "anti-aliasing", nem "font smoothing". Visitei fóruns, li artigos, me perdi ao responder para muitos, até para mim mesma. MAS, também utilizando o CSS3, achei uma solução que dá pelo menos uma "aparência" de antiserrilhamento não totalmente válida.
Usando a propriedade text-shadow consegui disfarçar o serrilhamento de uma página HTML em que eu utilizava o font-face. Segue o código pronto para inserir na folha de estilo:

    text-shadow: 0 0 1px rgba(0,0,0,0.3);

Pode-se alterar para uma cor mais cabível para a página, já que a cor não vai ser válida para todos documentos HTML do mundo. Preferi utilizar rgba(0,0,0,0.3) mas pode ser alterada para HEX sem problemas.

Segue abaixo os códigos. Os campos em vermelho indicam o que é para alterar.

Código da tipografia personalizada:

@font-face {
     font-family: NOME DA FONTE;
src: local('☺'), url('LINK DA FONTE EM .WOFF') format('woff'), url('LINK DA FONTE EM .TTF') format('truetype'), url('LINK DA FONTE EM .SVG') format('svg');

}

Código pra usar a tipografia personalizada com aparência de anti-alias:

h1 {
     font-family: NOME DA FONTE; text-shadow: 0 0 1px rgba(0,0,0,0.3);
 }