Regra @font-face CSS

Definição e uso

Ao usar a regra @font-face, os designers da Web não precisam mais usar fontes "seguras".

No regra @font-face, você deve definir primeiro o nome da fonte (por exemplo, myFirstFont) e depois apontar para o arquivo da fonte.

Dica:O URL da fonte deve ser em minúsculas. Letras maiúsculas podem causar resultados inesperados no IE!

Para usar a fonte em elementos HTML, cite o nome da fonte através da propriedade font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

Especifique uma fonte chamada "myFirstFont" e defina o URL onde pode ser encontrada:

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

Mais exemplos TIY podem ser encontrados na parte inferior da página.

@font-face {
  font-properties
}

Fonte Descriptiva	Valor	Descrição
font-family	name	Obrigatório. Define o nome da fonte.
src	URL	Obrigatório. Define o URL de download da fonte.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Opcional. Define como a fonte deve ser esticada. O valor padrão é "normal".
font-style	normal italic oblique	Opcional. Define o estilo da fonte. O valor padrão é "normal".
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Opcional. Define a espessura da fonte. O valor padrão é "normal".
unicode-range	unicode-range	Opcional. Define o intervalo de caracteres Unicode suportados pela fonte. O valor padrão é "U+0-10FFFF".

Você deve adicionar outra regra @font-face que contenha o descriptor do texto em negrito:

@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 caracteres em negrito da fonte Sansation.

Cada vez que um trecho de texto que deve ser apresentado em negrito com a família de fontes "myFirstFont" é definido, o navegador usará ela.

Dessa forma, você pode definir várias regras @font-face para a mesma fonte.

Internet Explorer, Firefox, Opera, Chrome e Safari suportam a regra @font-face.

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

* Edge e IE: O formato da fonte é válido apenas quando definido como "installable".

* Firefox: Por padrão, está desativado, mas pode ser ativado (é necessário definir a flag como "true" para usar WOFF2).