Como adicionar fontes customizadas em HTML

Você fez o layout de um site ou blog e usou aquela fonte bacana, mas que na hora de montar, teve que trocar por Arial adjacente por não se tratar de uma fonte de sistema, certo? Ok, vamos acabar com isso.

Já havia algumas práticas de embed (embedar) fontes ao CSS, usando o @fonte-face, o problema é que havia uma certa incompatibilidade. Algumas fontes funcionavam em todos os navegadores, outras só noFirefox e dava erro no Chrome, mas funcionava no Safari, em fim, era uma zona, mas nós desenvolvedores, fazíamos o que podíamos.

Recentemente, um amigo meu, tembém desenvolvedor, me passou esse site “Font Squirrel“, e a primeira vista, eu imaginei que fosse apenas um gerador de font-face, como eu já utilizava com outros sites, entretanto, este se mostrou bem melhor, uma vez que ele importa a fonte para vários formatos diferentes e já cria o @font-face completo, ainda disponibiliza um zip com as fontes e um HTML de testes, para você simplesmente copiar os códigos direto para seu site.

Só é preciso ficar atento onde você jogou as fontes dentro do seu site, e ajustar os caminhos de forma correta dentro do seletor@font-face.

Antes de ler este passo-a-passo de como usar o Font Squirrel[bb], considere usar o Google Fonts[bb] como nós ensinamos neste post: “Fontes customizadas em html e css com o Google Fonts“. É um jeito mais fácil, mais leve, mais rápido e juridicamente legal, pois estas fontes são free e você pode utilizar em seus sites e/ou com seus clientes sem se preocupar com processos de direitos autorais.

Porém, caso queira aprender como usar o Font Squirrel, continue lendo o passo-a-passo a baixo que nós iremos te ensinar.

Segue a baixo um rápido tutorial do funcionamento do site:

1 – Acesse o link: http://www.fontsquirrel.com/fontface/generator

2 –  Selecione as opção “OPTIMAL”, marque os termos de adesão e clique em “ADD FONTS” para subir a fonte que você deseja colocar em seu site.

3 – Após a conversão, basta baixar o KIT Zipado que vem com um HTML, CSS e as fontes que você precisa em formatos diferenciados

Após descompactar os arquivos, basta abrí-los em seu editor HTMLe inserir as linhas de código que o Kit sugere. Na verdade, você só precisa adicionar o stilo @font-face ao seu CSS e jogar as fontes para a raíz de onde está hospedado seu site.

Cuidado com o PATH do CSS, isso irá depender de qual diretório está seu arquivo em relação as fontes, caso ele não esteja na raíz do diretório, você terá que configurar corretamente o caminho das fontes dentro do stilo @font-face.

5 comentários em “Como adicionar fontes customizadas em HTML

  • 16 de março de 2012 em 14:41
    Permalink

    sabe como faço para adicionar 2 fontes diferentes com o font-face ?

    Resposta
    • 19 de março de 2012 em 18:12
      Permalink

      Sim, quando você estiver gerando uma fonte, assim que terminar de gerar a primeira, você pode mandar adicionar a segunda, e por aí vai, e quando terminar de adicionar todas, você finaliza gerando o zip com os arquivos necessários. Se você ainda não estiver conseguindo, manda um email pra contato@sabecomofazer.com.br ou uma mensagem pra nossa Fan Page que eu te auxilio melhor.

      Resposta
  • 10 de abril de 2012 em 18:28
    Permalink

    Não sei se alguém teve esse problema, mas algumas fontes só estão sendo visualizadas corretamente se os arquivos estiverem na raiz. Se eu criar uma pasta fontes e colocar os arquivos lá dentro as fontes ficam estranhas.

    Isso está acontecendo somente no Google Chrome.

    Se alguém souber a solução disso, obrigado!

    Resposta
    • 16 de abril de 2012 em 11:15
      Permalink

      Olá Ricardo, geralmente esse problema acontece por três motivos, um é quando você move a fonte da raiz pra uma pasta e esquece de mudar no CSS o caminho da fonte em relação ao local de onde está o CSS. O segundo problema é quando a gente converte no font-squirrel uma fonte que não é originalmente TTF. Não pode usar outras fontes que não sejam originalmente criadas como TTF. E o terceiro problema que tem acontecido muito é o font-squirrel gerando arquivos zipados com problemas, faltando fontes, css, e etc… Tem sempre que verificar se vieram todos os arquivos no pacote.
      E caso você ainda esteja tendo esse problema, me avise que nós criaremos um post sobre como usar o Google Fonts. É só curtirem a nossa Fan Page que serão avisado quando esse post estiver pronto.

      Abraços.

      Resposta
    • 16 de abril de 2012 em 17:39
      Permalink

      Lembrei de mais uma coisa, o Chrome tem um cahce de fontes muito forte, então ele fica mantendo a fonte errada, mesmo que você tenha atualizado. Tente verificar isso também!

      Resposta

Deixe uma resposta

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