Como usar o google fonts no blogger

Olá pessoas, tudo certo? Bom pro post de hoje (post de utilidade pública por acaso) trouxe um goodie. Bom eu demorei um bom tempo pra achar um tutorial decente de como deixar as fontes do titulo do post "mais bonitas" e como eu consegui, e já venho utilizando ele a um certo tempo, vim compartilhar com vocês \o/



Eu particularmente, não acho as fontes oferecidas pelo blogger tão 'atraentes', principalmente se formos considerar as fontes que eu baixo para fazer banners, e afins. Uma solução que encontrei -na época tumblr minha- foi o Google Fonts; não sabia como passa isso pro blogger, então fui buscar e achei a solução no blog da Elaine Gaspareto (os créditos a essa gracinha que me ajudou @), e é claro estou aqui agora para compartilhar com vocês!

1. Entre no Google Fonts @ e escolha a fonte que você deseja usar

2. Clique em quick-use (também conhecido como botão do meio)

3. Desça a página até encontrar a caixinha número três: Add this code to your website ( a mesma da foto abaixo). Copie o código de dentro dela - e lembre-se, não feche ainda a aba do google fonts


4. Agora abra o blogger e entre em modelo > editar html. Procure por <head>, e abaixo dessa tag cole o código da caixinha que você copiou. PS: se for colocar mais de uma fonte, você deve fazer do mesmo jeito para cada uma delas, sempre colando uma em baixo da outra

5. Salve

Claro que, sua fonte ainda não apareceu, isso porque você só vai substituir aquilo que você quer. Vamos ao passo 2 

Bom, a partir de agora, você vai precisar copiar outro código, mas calma, isso ainda esta lá no google font, então volte lá e copie o código de dentro da caixa quatro: Integrate the fonts into yout CSS




Se você quer mudar a fonte título da sidebar você deve procurar por
font: $(widget.title.font);
e quando encontrar deve substituir pelo código da caixa 4
Se você quer mudar a fonte títulos dos posts você deve procurar por:
font: $(post.title.font);
e quando encontrar deve substituir pelo código da caixa 4
 
Se você quer mudar a fonte do título da blog você deve procurar por:
 font: $(header.font);
e quando encontrar deve substituir pelo código da caixa 4

 PS: se você quer adcionar o tamanho que você quer colocar para fonte, basta apenas colocar tamanho que você quer+px antes da fonte. Por exemplo:
font-family: 30px 'Sniglet', cursive;
Espero que gostem, beijos e até o próximo post (:

2 comentários:

  1. Acho esse tutorial bem útil, ainda mais pra pessoas que não sabem nem colocar background por HTML like a eu u-u
    Beijos || Unlocked Land ❤

    ResponderExcluir
    Respostas
    1. Que bom que gostou, haha
      é meio complicado, mas ok, com o tempo pegamos a pratica, né

      Excluir

Oi, que bom que vai comentar, mas antes, leia as regrinhas para melhor desempenho do blog:
- TODOS os comentários são moderados para evitar comentário do tipo "oi, seguindo segue de volta?" porque isso irrita MUITO
- Sem spam
- Tente comentar algo sobre o post
- Comentário são sempre retribuídos