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:

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:

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