4 minutos
Fontes customizadas em páginas web
Como as tecnologias evoluem muito rápido, ao invés de trazer uma tabela com navegadores que possuem ou não suporte à este recurso, neste post vou deixar o link como consulta para chegar quais navegadores e em quais versões possuem suporte.
Esse tipo de recurso é interessante para criar uma experiência customizada. Um
exemplo bem visível até mesmo aqui no blog, é a utilização de fontes
monospace
para representar os blocos de código.
Tipos de fonte
Existem alguns tipos de fontes, são elas:
- TrueType Fonts (TTF);
- OpenType Fonts (OTF);
- The Web Open Font Format (WOFF e WOFF 2.0);
- SVG Fonts/Shapes;
- Embedded OpenType Fonts (EOT).
CSS
Essas fontes são inseridas com CSS, utilizando @font-face
, sendo possível
disponibilizar todos os formatos acima, como no exemplo:
@font-face {
font-family: 'Hyper Sans';
src: url('https://flaverton.com/fonts/HyperSans.eot');, /* IE9 Compat Modes */
src: url('https://flaverton.com/fonts/HyperSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://flaverton.com/fonts/HyperSans.woff') format('woff'), /* Modern Browsers */
url('https://flaverton.com/fonts/HyperSans.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://flaverton.com/fonts/HyperSans.svg#HyperSans') format('svg'), /* Legacy iOS */
local('Hyper Sans') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: normal;
}
Para utilizar ela em um elemento, o valor registrado em font-family
deve
ser colocado como valor da propriedade de mesmo nome do elemento de destino:
body {
font-family: 'Hyper Sans', sans-serif;
}
Fontes customizadas tem suporte em muitos navegadores e clientes de email,
mas mesmo assim ainda é interessante tomar cuidado e oferecer uma fonte de
backup. Observe que a segunda opção é sans-serif
, isso significa que mesmo
que não encontre a fonte Hyper Sans
ainda será exibido conteúdo com uma
fonte próxima, no caso uma sans padrão do sistema, não perdendo completamente
a identidade da tipografia pensada para o site.
Os próximos itens itálico e negrito parecem óbvios, porém se não forem configurados corretamente, as fontes podem não ser aplicar os estilos quando as tags forem utilizadas.
Existem a opção de cada variação ser importada como um font-family diferente, mas fica bem complicada a manutenção depois, importando como nos exemplos abaixo fica bem mais simples.
Itálico
A propriedade font-style
(itálico, normal):
@font-face {
font-family: 'Hyper Sans';
src: url('https://flaverton.com/fonts/HyperSansItalic.ttf') format('truetype')
font-style: italic;
font-weight: normal;
}
body {
font-family: 'Hyper Sans', sans-serif;
}
No exemplo acima é aplicado a fonte em itálico com a tag i
:
<p>Paragráfo normal com <i>itálico</i>.</p>
Negrito
A propriedade font-weight
(bold, 100, 200, 300 etc):
@font-face {
font-family: 'Hyper Sans';
src: url('https://flaverton.com/fonts/HyperSansBold.ttf') format('truetype')
font-style: normal;
font-weight: bold;
}
body {
font-family: 'Hyper Sans', sans-serif;
}
No exemplo acima é aplicado a fonte em negrito com a tag b
:
<p>Paragráfo normal com <b>negrito</b>.</p>
Tipos de importação
A propriedade src
indica onde a fonte tratada como um recurso pode ser
encontrada, abaixo as variações:
- local: quando se instala uma fonte no sistema operacional ela tem um nome interno para o sistema (geralmente um que é apresentado em programas de visualização ou gerenciamento de fonte e que algumas vezes é diferente do nome do arquivo), essa propriedade local deve ter esse nome como valor;
- url: faz o download do arquivo de fonte para o navegador e carrega para que seja utilizada na página.
Que fonte é essa?
Pode identificar a fonte em uma imagem enviando para algum destes links:
Também existe uma extensão que indiquei neste post sobre extensões para navegador.
Serviços de fonte
São serviços por assinatura ou por venda de uma licença de uso da fonte. Que podem oferecer um CDN próprio para as fontes:
Além de serviços interessantes, existem listas com diversas fontes para vários propósitos:
Você pode hospedar suas fontes em um servidor como arquivo estático e servir via CDN e/ou no servidor da sua aplicação, mas isso requer configuração adicional de CORS e a configuração depende do serviço/servidor que irá utilizar.
Conversores
Para conversão online sempre utilizo o transfonter.
Para conversão utilizando software desktop, utilizei o Transtype 4 da Fontlab.
Referências
- Serving Fonts from CDN;
- Cross-Origin Resource Sharing (CORS);
- CSS Web Fonts;
- CSS @font-face Rule;
- Using @font-face.
Atualização
- 25 de agosto de 2020: adicionada lista de fontes com 70 itens e suas aplicações, obrigado pela sugestão Bekkie.