Como usar qualquer fonte no blog com font-face | Follow your dreams
Blogosfera

Como usar qualquer fonte no blog com font-face

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

  1. 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?

  2. 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

Deixe uma resposta para Sanshaine Leticia Cancelar resposta