13jul2017

Como usar qualquer fonte no blog com font-face

  • Categorias: Blogosfera   |   Tags: , ,
  • Oi pessoal!

    Há alguns anos postei pra vocês como usar qualquer fonte no blog utilizando o método "Cufón", mas no início de 2017 o site que permitia transformar nossas fontes em cufón de forma prática foi descontinuado. Então nesse post vamos aprender outra maneira super simples de fazer isso, para que você possa continuar usando qualquer fonte no seu blog e não depender do Google Web Fonts (nada contra, mas eu acho super limitado!).

    O font-face é uma propriedade que libertou os desenvolvedores web trazendo a opção de usar qualquer fonte nos sites/blogs/etc., sendo apenas necessário ter o arquivo dela (e um local para hospedá-lo, é claro).

    Como usar qualquer fonte no blog com font-face 1

    Vamos ao tutorial:

    • 1 - O código, com todos os tipos de formatos, é:

    @font-face {
    font-family: 'NomeDaFonte';
    src: url('http://endereçodafonte.eot');
    url('http://endereçodafonte.woff2') format('woff2'),
    url('http://endereçodafonte.woff') format('woff'),
    url('http://endereçodafonte.ttf') format('truetype'),
    url('http://endereçodafonte.svg') format('svg');
    }

     

    • 2 - Geralmente encontramos a fonte nos formatos TrueType ou OpenType (.ttf ou .otf). Para gerar todos esses outros formatos, vá para o site Transfonter e clique em ADD FONTS > selecione a fonte que você quer usar > marque todos os formatos como indicado na imagem abaixo > clique em CONVERT e por fim, clique em DOWNLOAD.

    Como usar qualquer fonte no blog com font-face 2

     

    • 3 - Para hospedar os arquivos e obter os endereços você pode utilizar o método que ensinei aqui nesse post, funciona para qualquer arquivo, não só JavaScript.

     

    • 4 - Esse código deve ser utilizado no corpo do template ou tema.

    No BLOGGER, deve ficar ACIMA da linha:

    ]]></b:skin>

    No WORDPRESS, deve ficar no arquivo stylesheet.css.

     

    • 5 - Depois disso é só adicionar a seguinte linha em todos os elementos que você deseja aplicar a fonte:

    font-family: 'NomeDaFonte';

     

    Qual é o melhor formato de fonte?

    Não é preciso utilizar TODOS os formatos que citei acima, fica a critério. Trouxe pra vocês essa tabela do site W3Schools que mostra quais os formatos cada navegador suporta:

    Como usar qualquer fonte no blog com font-face 3

    Fonte: W3Schools. Traduzida por: Follow your dreams

    Observações retiradas do W3Schools:

    *¹Edge and IE: Somente funciona quando a fonte estiver no modo "instalável".

    *²Firefox: Desabilitado por padrão, mas pode ser habilitado.

     

     

    Tentei usar esse método hospedando a fonte em vários locais, inclusive na minha hospedagem própria, mas não funcionou. Depois de pesquisar bastante vi algumas pessoas falando em fóruns americanos que esse é um problema comum do Blogger com arquivos externos. Mas felizmente testei com o GitHub e funcionou!

    Espero ter ajudado.

    Até a próxima!

    6 Comentários em “Como usar qualquer fonte no blog com font-face”

    1. Lory 21 julho 2017 at 10:14 #

      Eu já tinha visto o font-face, mas não facia a menor ideia de como usar
      É muito prático! E o tutorial super simples, obrigada!

    2. Jaqueline 22 julho 2017 at 12:10 #

      Nossa fiquei desesperada quando o Cufón foi descontinuado :( Aprendi com vc de maneira simples a colocar fonts diferentes. Espero que esse tutorial também me ajude muito assim como o outro ♥
      http://www.blogflorescer.com

    3. Yosuky Sammy 25 julho 2017 at 17:34 #

      Eu fiz o tutorial passo a passo, certinho, pelo Github, mas no meu blog não funcionou nem por decreto divino! :( Será que fiz algo errado?

    4. Sanshaine Leticia 8 agosto 2017 at 18:59 #

      Por favooor, faz tutorial de como colocar esse amei nos post!!!

    5. Luciana Midory 14 agosto 2017 at 16:22 #

      Sempre tive preguiça de usar font-face, até que precisei nesse fim de semana. E não é que não era o bicho de sete cabeças que eu imaginava? O passo a passo de vocês é maravilhoso, deu certinho! Muito obrigada <3

    6. Ingrid Maria Ramires 16 agosto 2017 at 14:12 #

      Muito útil o tutorial, seu blog é muito fofo *-*
      https://poetizandomaria.blogspot.com.br/

    Leave a Reply to Yosuky Sammy