Como usar fontes da Web

Sep 15, 2025

Como

O seguinte é um trecho retirado do manual do WebFont de Bram Stein. Compre aqui .

Fontes da Web são definidos em CSS através do @Tipo de letra regra. Se você é um desenvolvedor web, você provavelmente tem escrito, copiado e colado, ou no mínimo visto @Tipo de letra regra.

Por uma questão de completude, porém, vamos correr rapidamente através de um exemplo básico:

 @ font-face {
  Font-família: Elena;
  SRC: URL (Elena-regular.woff);
}

Isso cria uma nova família de fontes da Web que pode ser referenciada através do família de fontes ou Fonte propriedade de taquigrafia. Mas algo está faltando aqui. Ao referenciar uma fonte web em uma pilha de fonte, certifique-se sempre de incluir pelo menos uma fonte de fallback caso a fonte da Web não seja carregada.

Aqui, se Elena não carrega, o navegador vai cair de volta no genérico Serif. família de fontes:

 p {
  Fonte-Família: Elena, Serif;
}

Há mais para fontes de fallback, mas por enquanto, vamos manter nossa pilha de fonte simples, incluindo apenas o genérico Serif. e sem serifa Famílias de fontes.

Famílias de fonte

Criar uma família de fontes com vários estilos é realizado criando um @Tipo de letra regra para cada estilo e usando o mesmo família de fontes nome. Os seguintes @Tipo de letra Regras criam uma família com um estilo normal e ousado:

 @ font-face {
     Font-família: Elena;
     SRC: URL (Elena-regular.woff);
     Peso da fonte: normal;
}
   @Tipo de letra {
     Font-família: Elena;
     SRC: URL (Elena-Bold.woff);
     intensidade da fonte: Negrito;
}

Você pode usar esta família de fontes em seu CSS referenciando o nome da família e o peso em seus seletores. Isso aplica o estilo regular aos parágrafos e o estilo arrojado a Forte parágrafos:

 p {
  Fonte-Família: Elena, Serif;
}

p forte {
  intensidade da fonte: Negrito;
}

além do mais espessura da fonte , @Tipo de letra também aceita o. estilo de fonte e estiramento de fontes Descritores de propriedade, que definem estilos como itálico e condensados. Todos os três descritores de propriedade podem ser usados para criar uma única família de fonte com vários estilos. Teoricamente, isso permite criar uma família contendo 243 estilos individuais (nove espessura da fonte Valores × Três. estilo de fonte Valores × Nove. estiramento de fontes valores).

Na prática, no entanto, você está limitado a 27 valores, já que alguns navegadores não suportam estiramento de fontes . Dê uma olhada na tabela abaixo para ver quais navegadores você pode usar e olha aqui para informações mais detalhadas.

Click the icon in the top right to enlarge the image — Clique no ícone no canto superior direito para ampliar a imagem

Com sorte, os restantes navegadores implementarão o estiramento de fontes Propriedade em breve, e você poderá usar todas as 243 classificações de fonte.

Formatos de fonte

O src. O descritor informa a um navegador onde obter um arquivo de fonte. Os exemplos anteriores usavam um único formato de fonte, mas muitas vezes vê URLs para vários formatos de fonte combinados com dicas de formato, que são anexados após o URL usando o URL Formato ("valor") sintaxe.

Dicas de formato Informe o navegador Qual o formato do arquivo de fonte em um determinado URL é.

 @ font-face {
  Font-família: Elena;
  SRC: formato de URL (Elena-regular.woff2) ("WOFF2"),
       Formato de URL (Elena-regular.woff) ("Woff");
}

Se você listar vários formatos, os navegadores modernos escolherão o primeiro formato que eles suportam com base na sugestão de formato. Portanto, é importante listar formatos de fonte da Web na ordem de melhor compactação para menos.

Mesmo que as dicas de formato sejam opcionais, sempre inclua-as - elas permitem que o navegador saiba sobre o formato sem precisar baixar a fonte. Por exemplo, se um navegador não suportar WOFF2, mas o suporte ao WOFF, ele poderá pular o arquivo de fonte WOFF2 com base na sugestão de formato.

Os navegadores suportam vários formatos de fonte da Web: OpenType (TrueType), EOT, WOFF e WOFF2. Alguns navegadores também suportam fontes SVG, mas estão presas e não devem mais ser usadas (e não devem ser confundidas com o Novo formato opentype-svg ).

EOT, WOFF e WOFF2 são tecnicamente não formatos de fonte. Eles são compactados arquivos opentype com diferentes graus de compressão. O WOFF2 oferece a melhor compressão, seguida de Woff e EOT.

Na pesquisa de cobertura para todos os navegadores, você pode ter se deparado com algo chamado a prova de balas @Tipo de letra sintaxe por fontspring.

A sintaxe à prova de balas usa EOT, WOFF2, WOFF, OpenType RAW e arquivos de fonte SVG para máxima cobertura do navegador:

 @ font-face {
  Font-família: Elena;
  SRC: Formato de URL (Elena.Eot #Iefix) ("Embedded-OpenType"),
       formato de URL (Elena.woff2) ("WOFF2"),
       formato de URL (Elena.woff) ("Woff"),
       formato de URL (Elena.otf) ("OpenType"),
       Formato de URL (Elena.svg # Elena) ("SVG");
}

A primeira linha de URL pode parecer um pouco estranha para você. Versões do Internet Explorer 8 e abaixo não suportam a sintaxe para vários formatos de fonte, e trate o valor total do src. propriedade como o URL.

A sintaxe à prova de balas trouxe o Internet Explorer 8 e abaixo do pensamento que os URLs restantes fazem parte do identificador de fragmento do primeiro URL. Como os identificadores de fragmentos são ignorados ao baixar arquivos, o Internet Explorer 8 e abaixo simplesmente usam o primeiro URL.

Navegadores que não o Internet Explorer pularão a linha porque não suportam a EOT.

O restante das entradas é o que você esperaria: formatos de fonte listados em ordem de preferência.

Mas a sintaxe à prova de balas ainda é relevante? Não. Na verdade, acho que é prejudicial. As fontes SVG são descontinuadas e suportadas apenas pelos navegadores que não estão mais em uso.

A maioria dos sites suportam o Internet Explorer 9 e atualiza, mas a sintaxe lista a EOT como o primeiro formato de fonte preferencial. Mesmo que o Internet Explorer 9 e Suporte Woff, essas versões ainda baixarão o arquivo EOT, simplesmente porque ele está listado primeiro.

Como a maioria dos sites não suporta mais navegadores antigos, recomendo usar uma sintaxe simplificada. Esta sintaxe simplificada abrange todos os navegadores modernos, bem como ligeiramente mais antigos que ainda estão em uso ativo, como Android 4.4 e anterior:

 @ font-face {
  Font-família: Elena;
  SRC: formato URL (Elena.woff2) ("WOFF2"),
       formato de URL (Elena.woff) ("Woff"),
       formato de URL (Elena.otf) ("OpenType");
}

Mesmo que as versões antigas do Android ainda sejam usadas, a dependência mundial sobre esses navegadores está rapidamente diminuindo. Em breve você provavelmente será capaz de soltar o formato do OpenType bruto e simplificar ainda mais a sintaxe:

 @ font-face {
  Font-família: Elena;
  SRC: formato URL (Elena.woff2) ("WOFF2"),
       formato de URL (Elena.woff) ("Woff");
}

Nesse caso, alguém executando um navegador mais antigo simplesmente verá suas fontes de fallback em vez da fonte web. Isso é bom; Eles ainda podem ler o conteúdo na fonte de fallack.

Há outro valor possível para o src. descritor. O local a função leva o nome de uma família de fontes local. Se a fonte for instalada no sistema, o navegador usará isso, evitando assim um download extra.

 @ font-face {
  Font-família: Elena;
  SRC: Local ("Elena"),
       formato de URL (Elena-regular.woff2) ("WOFF2"),
       Formato de URL (Elena-regular.woff) ("Woff");
}

Embora isso possa parecer uma grande otimização, nada garante que a fonte local corresponda à sua fonte web.

Você pode obter uma versão diferente da fonte, uma fonte com suporte a linguagem diferente, ou até mesmo uma fonte totalmente diferente. Por essa razão, geralmente recomendo não usar o local função, a menos que você encontre essas desvantagens aceitáveis.

Este é um trecho de Bram Stein Manual do WebFont. , de um livro à parte. Nele, ele explora o que considerar ao selecionar fontes da Web, como usá-las de forma eficaz e como otimizar para o desempenho.

Artigos relacionados:

O que diabos é o blockchain?
30 extensões de cromo para web designers e devs
20 fontes gratuitas e gratuitas do Google Web

Como usar fontes da Web

Famílias de fonte

Formatos de fonte

Como - Artigos mais populares

21 maneiras de otimizar seu CSS e acelerar o seu site

Designer de afinidade: Como usar restrições

Como criar um aplicativo de painel com reagir

Projetar um site responsivo com dimensionamento baseado em EM

Como pintar miniaturas deliciosas

Criar um efeito portal em Maya

Como dominar o sombreamento da pele em 3D

Explore o código criativo com P5.JS

Categorias