Fontes da Web CSS
A regra CSS @font-face
As fontes da Web permitem que os designers da Web usem fontes que não estão instaladas no computador do usuário.
Quando você encontrar/comprar a fonte que deseja usar, basta incluir o arquivo de fonte em seu servidor web, e ele será baixado automaticamente para o usuário quando necessário.
Suas fontes "próprias" são definidas dentro da @font-faceregra CSS.
Diferentes formatos de fonte
Fontes TrueType (TTF)
TrueType é um padrão de fonte desenvolvido no final dos anos 80, pela Apple e Microsoft. TrueType é o formato de fonte mais comum para os sistemas operacionais Mac OS e Microsoft Windows.
Fontes OpenType (OTF)
OpenType é um formato para fontes de computador escaláveis. Foi construído em TrueType e é uma marca registrada da Microsoft. As fontes OpenType são usadas comumente hoje nas principais plataformas de computador.
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 compressão e metadados adicionais. O objetivo é oferecer suporte à 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 do que WOFF 1.0.
Fontes/formas SVG
As fontes SVG permitem que o SVG seja usado como glifos ao exibir texto. A especificação SVG 1.1 define um módulo de fontes 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 aplicada a 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 @font-faceregra; primeiro defina um nome para a fonte (por exemplo, myFirstFont) e depois aponte para o arquivo de fonte.
Dica: Sempre use letras minúsculas para o URL da fonte. Letras maiúsculas podem dar resultados inesperados no IE.
Para usar a fonte para um elemento HTML, consulte o nome da fonte (myFirstFont) por meio da font-familypropriedade:
Exemplo
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Usando texto em negrito
Você deve adicionar outra @font-faceregra contendo descritores para texto em negrito:
Exemplo
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
O arquivo "sansation_bold.woff" é outro arquivo de fonte, que contém os caracteres em negrito para a 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.
Dessa forma, você pode ter muitas @font-faceregras para a mesma fonte.
Descritores de fontes CSS
A tabela a seguir lista todos os descritores de fonte que podem ser definidos dentro da @font-faceregra:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |