Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Melhor forma de adicionar fonte externas

E aí, galera! Beleza?

Seguinte, tô com uma dúvida: Qual seria a melhor pratica ou a forma mais segura de não dar erro pra acrescentar fontes externas ao projeto? Já vi o pessoal fazendo download da fonte e adicionando o diretório ao projeto; Usando um link no html com a url do google fonts ou o @import pro css; Vi usarem o @font-face... Enfim, gostaria de saber a opnião de vocês, please!!!

Forte abraço a todos!

9 respostas

Olá! Blz.

Acredito que hoje a galera use muito @font-face colocando no seu projeto a fonte, porém depende muito .

Falei do @font-face "colocando no seu projeto o font", pois assim você não depende muito de terceiros.

Beleza e você?

Obrigada pela resposta! ;-)

E no caso de fazer o download da fonte e inseri-la no projeto? Isso não previniria de B.O.s futuros ou geraria algum tipo de problema?

Acredito que depende da fonte que você utiliza. Se for uma fonte paga, com direitos de copyright sim! Então quando for usar a fonte verifica se ela tem alguma restrição de uso e compartilhamento.

Ótimo ponto! A gente que é iniciante as vezes deixa isso passar batido. Sempre bom relembrar!!

O @marcobrunodev (vejo bastente os vídeos dele) indica colocar pelo google fonts com um link na head, ao invés de um @import no css, porque em alguns casos faz uma pequena diferença na performance. Em relação a isso, o que você saberia me dar mais infos? Sobre essa pequena diferença que ele mensiona?

Seria o seguinte: a importação da fonte se enquadraria como config da página. Sendo config, ficaria mais semântico adicioná-la na head da página. (Acho que é isso rs)

Laura,

eu já usei de várias formas, acredito que em relação a performance a melhor maneira é ter a fonte no seu código, assim você carrega a font junto com a aplicação e existem algumas questões em relação as fonts disponibilizadas por terceiros, que não me impossibilitam de usar, porém é algo que me deixa com receio de usar: Disponibilidade e latência no acesso. Isso é uma opinião pessoal, relacionada ao que já vivi com utilização de fonts.

Entendi, obrigada pela explicação!

solução!

Olá Laura! Assim como o Markus falou, eu também acho que, dependendo do tamanho do seu projeto, vale a pena você colocar a fonte baixada dentro dele, pois ai você consegue usar tanto o @font-face quanto o @import (caso seja uma font que você baixou do google fonts). Na questão da performance as fonts do Google sempre me são muito rápidas e possíveis de requests assíncronos, mas fontes em CDN como o do font-awesome por exemplo sempre dão problema na hora de testar uma conexão piorzinha tipo 2G ruim. Eu particularmente ainda utilizo as fontes do Google por CDN e TODAS as do font-awesome (minificadas e selecionadas) eu coloco no projeto, pq mesmo tento 1 ou 2 arquivos a mais eu tenho 2390128301 dores de cabeça a menos rsrsrssrs

@André, obrigada pela explicação!! Clareou bastante!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software