Fontes customizadas em html e css com o Google Fonts

Recentemente recebemos muitas dúvidas sobre customização de fontes em HTML e CSS, então vamos orientar o pessoal com um método mais fácil, mais seguro e que é feito de forma legal, ou seja, vocês poderão utilizar este método para seus clientes, sem a preocupação com direitos autorais das fontes. E o mais importante, vocês poderão fazer o download das fontes para utilizarem direto na criação do layout pelo Photoshop, Fireworks ou Flash.

O Google agora disponibiliza uma galeria gratuita com mais de 500 fontes através da sua ferramenta google.com/webfonts. Vamos explicar agora como fazer para instalar as fontes em seu site e em seu computador.

1 – Acessem google.com/webfonts e escolham sua fonte.

2 – Após selecionar sua fonte, click em “add to colection”, você poderá escolher mais de uma. Irá aparecer uma barra azul como na imagem abaixo, indicando as fontes que você adicionou a sua coleção.

google fonts fontes css html customizadas

3 – Caso você queira usar essas fontes para montar seu layout, antes de adicioná-las no HTML, basta clicar em “download your collection” no canto superior direito da tela, assim você irá baixá-las e poderá instalar os arquivos no seu PC ou MAC[bb].

4 – Em seguida, caso voê já tenha seu layout, já saiba as fontes que deseja e quer colocá-las logo em seu CSS , basta clicar no botão “USE“, que fica nesta barra azul, no canto direito.

5 – Uma tela com as expecificações da fonte será aberta, e nesta área você poderá escolher as variações da vonte também, como “itálico” e “bold“.

6 –  Descendo um pouco mais nesta página, vem o código que o google pede que voê insira em seu site, para que ele possa jogar sua fontes css customizadas que você escolheu. Virifique o código dentro de um bloco azul chamado “Add this code to your website”. Você encontrará um código parecido com este:
<link href=’http://fonts.googleapis.com/css?family=Chau+Philomene+One|Gorditas’ rel=’stylesheet’ type=’text/css’>
E para este código funcionar, basta jogá-lo dentro da tag <HEAD> no topo do seu HTML[bb].

7 – Agora, para você identificar essas fontes customizadas em seu CSS, você deverá usar as chamadas que o próprio google fonts te dá, logo abaixo do bloco azul que contém o código acima. No meu caso, eu escolhi duas fontes, e para usá-las, eu joguei o código acima dentro do HEAD de todas as páginas do meu HTML e agora chamo elas dentro dos estilos no meu CSS da seguinte forma que o Google indicou abaixo.

font-family: ‘Chau Philomene One’, sans-serif;
font-family: ‘Gorditas’, cursive;
Sendo assim, meu estilo ficaria dessa maneira, dependendo da fonte que eu desejasse usar:

.elemento {
font-family: ‘Chau Philomene One’, sans-serif;
}

ou

.elemento {
font-family:Gorditas’, cursive;
}

Espero que esta maneira seja ainda mais fácil que trabalhar com fontes customizadas do font-squirrel, pois além de ser mais leve e mais prática, tem menos erros e o uso das fontes é liberado, e seu cliente não corre o risco de sofrer processos ou punições.

Qualquer dúvida, basta entrar em contato assim como fizeram no outro post e nós ajudaremos. Caso tenham dúvidas em outros processos, basta entrar em contato através de comentários, facebook ou no e-mail contato[a]sabecomofazer.com.br, que nós vamos tentar ajudá-los, como vem ocorrendo sempre.

8 comentários em “Fontes customizadas em html e css com o Google Fonts

  • Pingback: Adicionar fontes customizadas em HTML - CSS - @font-face | SABE COMO FAZER?

    • 25 de maio de 2012 em 15:38
      Permalink

      Vale muito a pena cara, até porque você pode fazer download das fontes e testar na confecção do layout no Photoshop, diferente do Typekit, e é mais leve que o Font Squirrel.

      Resposta
  • 6 de setembro de 2012 em 12:19
    Permalink

    Oi, segui todas as dicas, mas não consegui alterar a fonte. Escolhi a fonte: Sófia, já pesquisei em vários site e blogs, como fazer e não estou tendo sucesso.

    Agradeço muito se puderem me ajudar, quero usar esta fonte nos textos e títulos do meu blog.

    Obrigada, Frida Lucia

    Resposta
    • 7 de setembro de 2012 em 20:20
      Permalink

      Oi Frida,

      Já nos comunicamos por e-mail, e espero que seu problema tenha sido resolvido com nossa ajuda.

      Obrigado pelo contato!

      Resposta
  • 6 de março de 2013 em 11:50
    Permalink

    Excelente dica e explicação. Parabéns, me ajudou muito! :D

    Abraço!

    Resposta
  • 26 de junho de 2014 em 11:47
    Permalink

    Muito Obrigado pela explicação, ajudou muito !!

    Resposta
  • 16 de dezembro de 2015 em 13:02
    Permalink

    Estou passando pela mesma dificuldade que Frida,estou seguindo passo a passo e a fonte não é mudada.

    Resposta

Deixe uma resposta

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