Usando fontes personalizadas no blogger

- 14:41:00
como adicionar fontes no google blogger


Hoje vamos compartilhar com você uma boa dica para modificar o estilo de fonte no Blogger isso é bom pois as vezes o template vem com fontes que não são apropriadas para uma boa leitura seja isso de titulos de paragrafo uma boa fonte pode fazer toda  a diferença então nesse tutorial vai aprender como modificar as fontes do seu template no blogger para isso siga o passo a passo abaixo.


Selecionando a fonte que você deseja Utilizar no seu template:

Primeiro passo vá em Google Fonts   para esse caso vou utilizar Roboto mas pode escolher conforme seu gosto.  veja a foto abaixo:

fontes personalizadas no blogger

Como pode ver acima você pode escolher o estilo que isso vai ficar nas setas para cima e para baixo bem como escolher outras condições clicando no sinal de +  


Apos escolher você deve copiar o código selecionado na caixa como mostra a figura abaixo: 

fastest loading fonts blogger


Então copie o primeiro códígo acima vai ter um link como esse da foto acima: 

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Vamos agora procurar o código no template para substituir: 
va no menu modelo então editar HTML com as teclas combinadas CTRL+F busque por: </head> e va subindo para encontrar o código no exemplo abaixo o template tinha uma fonte open sans então apos encontrar isso substitua o link  não esqueça  a barra ao final para que não de erro no código. 

<head> ... <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'   /   >
 ...
 </ Head>

Apos feito isso agora selecione os elementos que deseja alterar a fonte aqui estarei usando o cabeçalho do Blogger para isso procure por: 

 .Header h1 { font-family: 'Open Sans', sans-serif; font-size: 7em; font-weight: normal; } 

Isso certamente vai ser encontrado antes de ]]></b:skin> ou </style>  então modifique isso como mostra agora:

.Header h1 {
   Font-family: 'Roboto';
   Font-size: 7em;
   Font-weight: bold;
   / * Ou  font-weight: 700; */
 }

Obs não esqueça da Barra /  ao final 

Salve e pronto o mesmo procedimento vale para outros elementos do Blogger. continue conosco para o próximo post.

.


EmoticonEmoticon

 

Start typing and press Enter to search