Fontes CSS da Web

Índice

A regra CSS @font-face

As fontes da Web permitem que os web designers usem fontes que não estão instaladas no computador do usuário.

Quando você encontrar/comprar a fonte que deseja usar, basta incluir a fonte arquivo em seu servidor web, e ele será baixado automaticamente para o usuário quando necessário.

Suas "próprias" fontes são definidas na regra CSS @font-face.

Diferentes formatos de fonte

Fontes TrueType (TTF)

TrueType é um padrão de fonte desenvolvido no final dos anos 1980 pela Apple e pela Microsoft. TrueType é o formato de fonte mais comum para Mac OS e Microsoft Sistemas operacionais Windows.

Fontes OpenType (OTF)

OpenType é um formato para fontes de computador escalonáveis. Foi construído em TrueType, e é uma marca registrada da Microsoft. Fontes OpenType são comumente usadas hoje nos principais plataformas informáticas.

O formato de fonte aberta da Web (WOFF)

WOFF é um formato de fonte para uso em páginas da web. Foi desenvolvido em 2009 e é agora uma recomendação do W3C. WOFF é essencialmente OpenType ou TrueType com compactação e metadados adicionais. O objetivo é apoiar a distribuição de fontes de um servidor para um cliente em uma rede com restrições de largura de banda.

O formato de fonte aberta da Web (WOFF 2.0)

Fonte TrueType/OpenType que oferece melhor compactação que WOFF 1.0.

Fontes/formas SVG

As fontes SVG permitem que SVG seja usado como glifos ao exibir texto. O SVG 1.1 especificação define um módulo de fonte que permite a criação de fontes dentro de um Documento SVG. Você também pode aplicar CSS a documentos SVG e a regra @font-face pode ser aplicado ao texto em documentos SVG.

Fontes OpenType incorporadas (EOT)

As fontes EOT são uma forma compacta de fontes OpenType projetadas pela Microsoft para uso como fontes incorporadas em páginas da web.

Suporte do navegador para formatos de fonte

Os números na tabela especificam a primeira versão do navegador que suporta totalmente o formato da fonte.

Font format
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	Not supported	Not supported

*IE: O formato da fonte só funciona quando definido como "instalável".

Usando a fonte que você deseja

Na regra @font-face; primeiro defina um nome para a fonte (por exemplo, myFirstFont) e depois aponte para o arquivo da fonte.

Dica: sempre use letras minúsculas no URL da fonte. Letras maiúsculas podem fornecer resultados inesperados no IE.

Para usar a fonte para um elemento HTML, consulte o nome da fonte (myFirstFont) através da propriedade font-family:

Exemplo

@font-face
{
   
font-family: myFirstFont;
   
src: url(sansation_light.woff);
}

div
{
   
font-family: myFirstFont;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

Usando texto em negrito

Você deve adicionar outra regra @font-face contendo descritores para texto em negrito:

Exemplo

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
   
font-weight: bold;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

</body>
</html>

O arquivo "sansation_bold.woff" é outro arquivo de fonte, que contém os caracteres em negrito da fonte Sansation.

Os navegadores usarão isso sempre que um pedaço de texto com a família de fontes "myFirstFont" for renderizado em negrito.

Desta forma você pode ter muitas regras @font-face para a mesma fonte.

Descritores de fontes CSS

A tabela a seguir lista todos os descritores de fontes que podem ser definidos dentro da regra @font-face:

Descritor:

font-family

Valores:

name

Descrição:

Obrigatório. Define um nome para a fonte

Descritor:

src

Valores:

URL

Descrição:

Obrigatório. Define a URL do arquivo de fonte

Descritor:

font-stretch

Valores:

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

Descrição:

Opcional. Define como a fonte deve ser esticada. O padrão é "normal"

Descritor:

font-style

Valores:

normal
italic
oblique

Descrição:

Opcional. Define como a fonte deve ser estilizada. O padrão é "normal"

Descritor:

font-weight

Valores:

normal
bold
100
200
300
400
500
600
700
800
900

Descrição:

Opcional. Define o negrito da fonte. O padrão é "normal"

Descritor:

unicode-range

Valores:

unicode-range

Descrição:

Opcional. Define o intervalo de caracteres UNICODE suportados pela fonte. O padrão é "U+0-10FFFF"