Fonte WOFF2: conheça as vantagens desse novo formato

about-woof2-gulch-in-ua

Em 2015 foi lançado um novo formato de fonte para internet, Web Open Font Format (WOFF) 2.0 é uma atualização do WOFF 1.0 com compressão melhorada, o novo formato proporciona uma redução de tamanho de arquivo de aproximadamente 30% comparada com a outros formatos.

A grande vantagem desse novo formato é a redução do tempo de carregamento, como cada fonte é um recurso adicional, e algumas delas podem bloquear a renderização do texto.

Ao realizar um levantamento no site da Apple, foi possível perceber que elas representam 19,5% do tamanho total do site mesmo utilizando apenas 4 tipos de fontes.

Resquests e Bytes - Apple.com
Resquests e Bytes – Apple.com

Comparativo

Confira um comparativo das principais fontes utilizadas atualmente nos quatro formatos de contêiner de fontes em uso na Web.

FonteSVGEOTTTFWOFFWOFF2
Font Awesome 4.3.0307kb60kb120kb70kb56kb
OpenSans Regular267kb108kb104kb63kb18kb
Montserrat Regular18kb29kb29kb36kb12kb
Roboto Regular274kb171kb171kb79kb18kb

Voltando ao exemplo do site da Apple, realizei o download das fontes e converti para WOFF2, para a minha surpresa o tamanho total passou de 272,07kb para 72,32kb, uma redução de 73,42%, confira no gráfico:

Compatibilidade

Segundo levantamento realizado no site Can I use… no dia 23/09/2015, a fonte WOFF2 já é compatível com 52,94% dos navegadores usados no mundo.

FonteSVGEOTTTFWOFFWOFF2
Compatibilidade com global95,92%10,37%90,6386,28%52,94%

Apesar se ser compatível com as versões mais recentes do Chrome e do Firefox, os navegadores da Apple e da Microsoft ainda não são compatíveis com o novo formato, mas por se tratar de um formato novo, a o número de navegadores compatíveis deve aumentar.

Compatibilidade dos navegadores com WOFF2
Compatibilidade dos navegadores com WOFF2

Como implementar

Se você utiliza o Google Web fonts não precisará realizar nenhuma alteração, o detecta e fornece automaticamente a variante otimizada para cada plataforma e navegador.

Para implementar WOFF2 primeiramente é necessário converter a fonte existente para o novo formato, para isso recomendo o uso do site Font Squirrel que gera as fontes em todos os formatos disponíveis e fornece o CSS para ser inserido em seu site.

Como alguns navegadores ainda não são compatíveis como o novo formato é necessário declarara todos os formatos no CSS. O navegador irá utilizar o primeiro formato com o qual ele é compatível, por esse motivo a fonte WOFF2 deve ficar antes das outras, como nesse exemplo:

Esse exemplo demostra a aplicação de uma família de fonte nos estilos normal, itálico e bold, caso você utilize a mesma fonte em diferentes estilos, você deve realizar a chamada do arquivo WOFF2 em todas as chamadas.

Caso você utilize um servidor Apache, adicione o seguinte código no .htaccess da raiz do seu site:

Conclusão

Por se tratar de um formato mais leve que os atuais e por possuir uma implementação simples que não causa problemas em outros navegadores, o WOFF2 é uma excelente alternativa para reduzir o tempo de carregamento do seu site e melhorar a experiência do usuário.