Como usar os meus próprios tipos de letra nas minhas páginas

[D]e certeza que já muita gente perguntou como utilizar os seus próprios tipos de letra nas suas páginas Web. Por muitos anos, estivemos limitados aos tipos de letra instalados no computador de quem a visualizava, mas com o aparecimento do CSS3, isto já é possível.

Para conseguir isto, basta possuir um browser que suporte CSS3 (todas as versões modernas existentes suportam).

Depois, basta declarar num ficheiro CSS o seguinte:
[css]@font-face {
font-family: Jura;
font-weight: bold;
font-style: normal;
src: url(/ri/wp-content/fonts/Jura-Bold.ttf);
}

@font-face {
font-family: Jura;
font-weight: normal;
font-style: normal;
src: url(/ri/wp-content/fonts/Jura-Regular.ttf);
}

@font-face {
font-family: Jura;
font-weight: bold;
font-style: italic;
src: url(/ri/wp-content/fonts/Jura-BoldItalic.ttf);
}

@font-face {
font-family: Jura;
font-weight: normal;
font-style: italic;
src: url(/ri/wp-content/fonts/Jura-Italic.ttf);
}[/css]
Dos browsers recentes, apenas o Internet Explorer não suporta ficheiros TrueType (TTF) e OpenType (OTF) directamente (será para admirar?). Para este, é preciso fornecer ficheiro Embedded OpenType (EOT). Existem conversores disponíveis para Windows, Unix (também funciona em Mac OS X).

Depois das declarações acima, basta utilizar tipo de letra como qualquer outro, numa declaração de estilo, por exemplo:
[css]h1 {
font-family: Jura;
font-size: 18pt;
font-weight: bold;
font-style: italic;
}[/css]
Este blog utiliza esta mesma técnica para o tipo de letra que, se não estiver a usar Internet Explorer, está a ver. O tipo de letra Jura pode ser descarregado aqui.

Esta entrada foi publicada em Desenvolvimento, Internet. ligação permanente.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *