Como colocar fontes personalizadas baixadas no blog- Dicas blog

Como colocar fontes personalizadas baixadas no blog? Para quem personaliza o blog sozinha pode parecer que é muito difícil personalizar o blog ou somente as fontes, e não tem segredo vou te mostrar como baixar essas fontes e colocar no seu blog. O tutorial é grande mas garanto que compensa, coloquei bastante imagens para facilitar na hora de fazer.

foto: google – edição @blogmiholiveira

Bom pra começar temos que escolher qual fonte vamos utilizar no blog, eu uso o site dafont, lá você pode escolher sua preferida e ver como vai ficar o que quer escrever antes de baixar, depois que escolheu a fonte você vai baixar ela no seu computador, geralmente o arquivo vem compactado então você tem que extrair o conteúdo da pasta.

Agora é necessário gerar um kit com os formatos da fonte que você escolheu, como existem vários navegadores e nós não sabemos de qual navegador o nosso leitor vai acessar temos que ter o formato de todos eles.

Navegadores e formatos de fonte:  Chrome - TTF - WOOF
Firefox - WOOF - WOOF2 - TTF
Safari | Android | IOS | Opera - WOOF2
xplorer (versão antes do EDGE) - EOT


E para que todos os seus leitores visualizem a mesma fonte sem erros no seu blog, precisamos ter os formato de todos os leitores instalados, então veja como gerar o kit para que tudo isso funcione sem erros.

Vamos acessar o site FontSquirrel e clicar em generetor e vai abrir a tela da imagem abaixo:

foto: @blogmiholiveira

Hora de carregar a fonte e gerar o kit: clique em carregar fontes e aguarde, coloque na opção ESPECIALISTA, e selecione os formatos da fonte, assim como na foto abaixo, role a pagina para baixo e marque as duas ultimas opções – atalho e acordo. 

 

Feito o download do kit da font, vamos extrair o arquivo da font que veio compactada e deletar alguns arquivos que não vamos usar 

Deletamos o que não vamos usar e sobrou apenas os formatos da fonte, e agora vamos hospedar a nossa fonte para usar o @font-face, eu costumo usar o tumblr e vou mostrar como faz por ele, mais existem outros diversos locais que podem hospedar.

Se não tiver uma conta no tumblr é bem fácil criar uma, de tiver faça o login e clique aqui e vamos editar o HTML, clique na engrenagem e depois recursos do tema, abaixo dos códigos html vai ter ” adicionar um arquivo” lá vamos carregar os arquivos da fonte que baixamos um por um. 

Agora vamos mexer no htlm do seu blog recomendo que faça um backup do seu layout antes.

No painel no do blog vamos clicar em TEMA  e EDITAR HTML, dentro do nosso HTML devemos achar a linha de código  ]]></b:skin>  (clique dentro do html e digite Ctrl + f , dentro da caixa que abrir coloque o código que queremos achar, fica mais fácil de localizar no tema).

Assim que localizar vamos colar acima dele esse código, veja nas imagens abaixo (clique nelas para ficarem maiores)

@font-face {
    font-family: 'NOME DA FONTE';
    src: url('URL FORMATO EOT');
         url('URL FORMATO WOFF2') format('woff2'),
         url('URL FORMATO WOFF') format('woff'),
         url('URL FORMATO TTF') format('truetype');
    }

Agora vamos novamente lá no tumblr  e vamos copiar os códigos da imagem e alterar o html acima, para facilitar vocês podem colar o código acima no blocos de notas e só depois de alterar o URL da fonte vocês colam no blog , para copiar o URL da fonte, vamos clicar com o botão direito do mouse e copiar o endereço do link, uma de cada vez.

 

Atenção: você deve colocar o url das imagens no formato indicado certinho para não dar erro.

Código completo é s[o salvar no seu layout. Vamos ver na real como usar ela no layout do blog, o mais comum é usar fontes personalizar no titulo do post ou na sidebar do blog, veja ela no titulo do post

Vamos localizar a tag h3, faça da mesma forma de o Ctrl+f e coloque h3 na busca tecle ENTER até localizar a tag. Em font-family você vai colocar o nome da sua fonte.

E pronto fica assim… É um tutorial bem longo para ler, mais garanto que você consegue fazer rapidinho, se você tem medo mexer no seu HTML eu posso fazer para você, só solicitar um orçamento por email. Se quiserem posso fazer esse tutorial em vídeo, é só pedir!

O que achou do tutorial de  como colocar fontes personalizadas baixadas no blog? me conta ai. Bjus da Mih ♥

Deixe um comentário