@font-face – Como gerar webfonts para o seu site

Para deixar seu site cada vez mais personalizado e com a identidade que você quer, existem diversos recursos no desenvolvimento web que facilitam muito a nossa vida, uma deles é o @font-face com ele é possível usar diversos tipos de fontes em nosso site, independente se o usuário final terá ela instalada em seu computador  ou não, o resultado será sempre o mesmo.

Para utilizar esse recurso é necessário declarar o @font-face em seu css, para isso utilize o seguinte código:

@font-face {
font-family: 'NOME DA FONTE';
src: url('CAMINHO DA FONTE .eot');
src: url('CAMINHO DA FONTE .eot?#iefix') format('embedded-opentype'),
url('CAMINHO DA FONTE .woff2') format('woff2'),
url('CAMINHO DA FONTE .woff') format('woff'),
url('CAMINHO DA FONTE .ttf') format('truetype'),
url('CAMINHO DA FONTE .svg#plutobold') format('svg');
font-weight: normal;
font-style: normal;
}

Nome da fonte: Em font-family você insere o nome da fonte que vai usar em seu site.
Caminho da fonte: Em url você mostrará para o navegador onde estão as fontes que seu site usará.

 

Como vocês podem notar, existe uma fonte e vários arquivos com extensões diferentes da mesma, falando de forma resumida cada navegador escolhe a extensão da fonte compatível com a sua plataforma e a exibe. Para gerar esse pacote de fontes normalmente usamos alguns sites que já fornecem esse tipo serviço e facilitam muito nossas vidas, abaixo deixo a lista com os link de cada um:

O procedimento nesses sites é praticamente o mesmo, você faz o upload da fonte que deseja utilizar e o serviço escolhido lhe retorna um “kit” com todas as extensões, basta pegar esses arquivos, colocá-los em uma pasta dentro do diretório do site e declarar o @font-face em seu css, se tudo estiver ok, seu site já terá suporte as webfonts que escolheu.

 

Se tiver alguma dúvida ou sugestão basta deixar um comentário abaixo que responderemos em breve.