Importando fontes de um CSS

TL;DR Se está com pressa, clique aqui

Quando você está desenvolvendo um aplicativo web, carregar as fontes de uma URL bem conhecida pode deixar seu site mais responsivo já que – geralmente – as fontes mais utilizadas são distribuídas por meio de cdn e via de regra são de uso comum. Então esse tempo de carga é abreviado já que as fontes estão no navegador. E se não estão, vão a passar a estar a partir daquele momento.

Em um dispositivo acontece tudo o contrário. Geralmente você deseja que suas fontes estejam já na pasta para serem usadas offline visto que você segue o princípio de offline-first.

As ferramentas que o YeAPF! disponibilizam ajudam na tarefa de baixar essas fontes.

Por exemplo, digamos que você tem um arquivo chamado ‘aplicativo.css’ e sua primeira linha importa fontes da Google assim:

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);

Isso é bem bacana em sites mas não em aplicativo como dizíamos no inicio.

A primeira coisa que faremos é baixarmos essa url para um arquivo assim:

$ wget https://fonts.googleapis.com/css\?family=Lato:400,300,300italic,400italic,700,700italic -O lato-orig.css

Após isso teremos um arquivo chamado lato-orig.css com várias chamadas a distintas urls que descarregam as fontes para o cache do navegador. Por exemplo, a primeira fonte fica assim no arquivo css:

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype');
}

Transformar esse lato-orig.css em um css offline (por chama-lo de alguma forma) requer que você faça o download de cada fonte, a coloque em uma pasta e mude a referencia no css para carregar da pasta e não do site da Google.

Uma outra opção é usar o ydownload-fonts-from-css que vêm na distro do YeAPF! da seguinte forma:

$ mkdir ../fonts
$ ydownload-fonts-from-css lato-orig.css

Após isso, seu arquivo css fica assim para a primeira fonte:

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(../fonts/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype');

}

Ele faz download sozinho de todas as fontes e já corrige seu css em um único lance.

O passo a passo completo fica assim:

$ cd css
$ wget https://fonts.googleapis.com/css\?family=Lato:400,300,300italic,400italic,700,700italic -O lato-orig.css
$ mkdir ../fonts
$ ydownload-fonts-from-css lato-orig.css