Na época em que a internet banda larga não era muito popular ficamos restritos a utilizar fontes padrões do Windows/Linux parar criar um site. Mas os tempos mudaram e agora podemos incluir nossas próprias fontes no website.
Além da maior customização, da aparência mais profissional, incluir uma fonte torna o site compatível com todos os sistemas operacionais e dispositivos. Não há mais necessidade de o dispositivo possuir a fonte usada para a correta visualização da página.
Essa maior liberdade torna os sites cada vez mais atraentes e profissionais. O resultado obtido ao carregar uma fonte em uma página da web é o mesmo que se a fonte estivesse instalada no dispositivo do usuário.
Obviamente, há um incremento no tempo de carregamento da página, mas nada tão significativo que impeça sua utilização. Não é por menos que a grande maioria dos sites abandonaram as fontes padrões e passaram a usar fontes personalizadas em seu lugar.
Todo desenvolvedor conhece (ou se não conhece deveria conhecer) o Google Fonts, um site que permite baixar e incluir facilmente fontes em seu site.
O repositório do Google é fantástico, mas nem sempre ele tem a fonte que desejamos. Muitas vezes ela está em nosso PC em formato TTF ou OTF, que são formatos de fontes usados pelo Windows que baixamos para usar em nossas aplicações como Illustrator, Photoshop e etc.
Se você tem uma fonte em seu PC e gostaria de usá-la em seu site saiba que isso é perfeitamente possível. Felizmente existem ferramentas que convertem essas fontes do formato TTF e OTF para as webfonts suportadas pelos navegadores.
Como converter arquivo TTF para Webfonts
Para converter o arquivo de fontes para um formato aceitável pelos navegadores é muito fácil. Dentre as diversas disponíveis no mercado para esta finalidade, a Font Squirrel é a mais popular.
- Acesse o site da ferramenta Font Suirrel;
- Clique no botão “Upload Fonts”;
- Clique em “yes” para aceitar os termos de uso;
- Clique no botão “Download Your Kit”.
Para utilizar o arquivo baixado basta extrair todos os arquivos para a pasta onde se encontra seu site. Chame o arquivo “style.css”. Não se esqueça de colocar os arquivos da fonte – com extensão .woff e .woff2 – e o CSS na pasta raiz do site.
<link href="stylesheet.css" rel="stylesheet" type="text/css" />O arquivo CSS gerado vai se parecer com o arquivo abaixo:
@font-face {
font-family: 'nome_da_fonte';
src: url('nome-da-font.woff2') format('woff2'),
url('nome-da-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}Não se esqueça, todos arquivos necessários para a utilização da fonte, incluindo a demonstração de utilização, podem ser encontrados no arquivo ZIP baixado no site da ferramenta acima!
No arquivo nome-da-fonte-demo.html tem um exemplo de utilização da fonte, o que facilita bastante o processo de desenvolvimento.
