Como incorporar fontes locais com css (google fonts offline)

Essa aula de hoje surgiu a partir de uma dúvida do Viana e que acabou virando um artigo do blog.

O Google Fonts sem dúvidas é uma mão na roda, se você ainda não sabe utilizá-lo, veja a aula Como usar as fontes do Google Fonts.

No entanto, existem situações que nem sempre podemos incorporar ou importar as fontes diretamente dos endereços do Google Fonts. Aplicativos híbridos por exemplo, não podem depender de uma conexão com a internet para incoporar as fontes, o mesmo ocorre com aplicações PHP desenvolvidas para intranets.

Neste caso, a solução mais interessante seria baixar a fonte do Google Fonts para usá-la offline ao invés de incoporar/importar e criamos uma regra CSS para utilizá-la. Então vamos aos passos.

Baixando fontes do Google Fonts.

Para baixar a fonte é bem simples;

1. Acesse o site do Google Fonts.
2. Escolha a fonte desejada e clique no ícone de + para selecionar a fonte desejada.
   
3. Na caixa de fontes selecionadas, clique no ícone do download.
4. Descompacte o arquivo compactado e copie as contes desejadas para dentro da pasta do seu projeto de site.

CSS para utilizar fontes locais, offline.

Crie um arquivo .css dentro da mesma pasta para qual você copiou a fonte, utilize o seguinte código;

@font-face {
    src: url(fonts/Raleway-Regular.ttf);
    font-family: 'Raleway-Regular';    
    font-weight: normal;
} 
body{
	font-family: 'Raleway-Regular'; 
}

Usando mais de uma fonte local.

Supondo que queira utilizar uma segunda fonte, basta criar outra regra CSS @font-face, crie quantas quiser mas não abuse pois quanto mais fontes, mais pesado fica seu aplicativo ou aplicação web.

Exemplo completo

Você pode ver um exemplo funcionando aqui…

http://aulas-profanderson.azurewebsites.net/tpi/carregar-fontes-offline/

Download do código de exemplo

O download do exemplo está disponível aqui;

http://aulas-profanderson.azurewebsites.net/tpi/carregar-fontes-offline/carregar-fontes-offline.zip