Guia do Usuário Cancelar

Seletores CSS

Os seletores CSS informam ao navegador onde aplicar as fontes da Web que você está usando, assim como a espessura e o estilo da fonte a serem usados no texto.

Usar nomes de família de fontes no CSS

A página de projetos da Web lista o nome da família de fontes CSS, a espessura numérica e o estilo de cada fonte presente no projeto. Clique no link “Editar projeto” para visualizar os detalhes de CSS de cada projeto.

imagem

Assim que incluir o código incorporado no documento, use esses nomes de família de fontes no CSS para aplicar as fontes ao texto. Por exemplo:

h1 {
font-family: "brandon-grotesque", sans-serif;
}
h1 { font-family: "brandon-grotesque", sans-serif; }
h1 {
  font-family: "brandon-grotesque", sans-serif;
}

Especificar fontes substitutas

Se o navegador de um usuário não oferecer compatibilidade para fontes da Web ou elas não forem carregadas por algum motivo, serão usadas as fontes substitutas na pilha CSS.

A pilha de fontes deve conter pelo menos uma fonte substituta que esteja invariavelmente disponível nas plataformas (como Georgia ou Arial), seguida de um nome de família de fontes genérico (como serif ou sans-serif). Se não for possível encontrar a primeira fonte, o navegador tentará a segunda fonte e assim por diante.

Usar vários estilos e espessuras

Você pode especificar espessuras de fonte diferentes de “normal” e “negrito” usando valores numéricos de espessura de fonte no CSS. Na maioria das vezes, os valores numéricos correspondem a estas espessuras:

  • 100 = fina
  • 200 = extrafina
  • 300 = leve
  • 400 = regular, livro
  • 500 = média
  • 600 = seminegrito
  • 700 = negrito
  • 800 = pesada
  • 900 = black

Você pode encontrar os valores numéricos para todas as fontes em seu projeto na página de projetos da Web.

imagem

Por exemplo, use este CSS para aplicar a espessura de fonte 700 ao elemento h1:

h1 {
font-weight: 700;
}
h1 { font-weight: 700; }
h1 {
  font-weight: 700;
}

Usar nomes com variação específica no Internet Explorer 8

O Internet Explorer 8 carrega no máximo quatro espessuras por família. Se você usar duas espessuras muito próximas (por exemplo, 600 e 700), pode ser que apenas uma seja carregada corretamente. O Adobe Fonts fornece nomes de família de fontes com variação específica para essas versões do navegador, corrigindo esses erros.

O nome com variação específica deve ser adicionado no início de uma pilha font-family, conforme a necessidade, antes do nome principal da família:

#post-title {
font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
font-style: normal;
font-weight: 700;
}
#post-title { font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; }
#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

Os nomes compreendem o nome normal da família de fontes, seguido de um hífen e de uma descrição da variação da fonte (ou FVD, font variation description). Por exemplo, o nome com variação específica da brandon-grotesque que contém a fonte com espessura 700 é brandon-grotesque-n7.

O nome variation-specific será indefinido nos navegadores que não apresentam esses problemas. Nesse caso, eles usarão o nome completo da família que vem em segundo lugar na pilha.

A maioria dos usuários não precisará usar esses outros nomes de família de fontes. Você só precisará adicioná-los se observar problemas na exibição correta das fontes especificamente no Internet Explorer 8.

Receba ajuda com mais rapidez e facilidade

Novo usuário?