Como deixar o arquivo de fonte woff2 local ao invés de usar o fonts.googleapis.com

Na maioria das vezes utilizamos a tag link para referenciar a biblioteca de fontes <link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”> fazendo assim, toda vez que a página for iniciada haverá uma conexão com a internet para esse link importar a fonte de ícones, isso em uma aplicação que funciona na internet tudo bem, mas para uma aplicação que funcione local sem uso de internet isso não funciona, outra coisa também é que em um aplicativo isso pode significar um pouco mais de tempo na inicialização, então eu resolvi mudar isso e testar, e funcionou da seguinte forma a baixo:

Eu abri o link https://fonts.googleapis.com/icon?family=Material+Icons no navegador, onde ele abre o css, salvei esse arquivo na minha pasta de css com o nome de icon.css, observe que ele te uma url que aponta para https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 eu também chamei esse link no navegador e salvei o arquivo de fonte woff2 na mesma pasta de css com o nome de icon.woff2 e substitui a url apontando para o caminho local desse arquivo que é a mesma pasta css, depois mudei na minha página a tag link para <link href=”css/icon.css” rel=”stylesheet”> funcionou tudo certinho e o meu app passou a inicializar mais rápido, pois agora ele não precisa carregar a fonte da internet.

Existem outras formas de se fazer isso, por exemplo, você pode usar o Material Design Icons só quele acrescenta mais 3mb no seu aplicativo, se isso não for fazer tanta diferença assim para você, tudo bem, pode usar, basta fazer o download do pacote de Webfont e acrescentar em seu projeto.

 

Se você quiser saber mais sobre Fonte WOFF2: conheça as vantagens desse novo formato (Gabriel Nege)

 

admin

Analista e Desenvolvedor de Sites, Sistemas e Aplicativos, trabalha a mais de 18 anos como desenvolvedor, sempre trabalhou em grandes empresas no estado do Pará. Criou este blog com o objetivo de compartilhar o conhecimento em desenvolvimento, mas nem sempre irá repassar "receita de bolo", irá repassar tudo que fez para resolver algum problema. Se inscreva para sempre receber conteúdos grátis toda semana. Assista o meu canal no YouTube https://www.youtube.com/c/altenirgama Visite minha fanpage https://www.facebook.com/altenirgama

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *