Personalizando as fontes do blog

domingo, março 03, 2013

Atendendo a pedidos finalmente vou mostrar como personalizar as fontes do blog através das fontes personalizadas do Google (como as que eu uso aqui no blog) . É um tutorial simples, mas requer um pouco de atenção. Ele consiste basicamente em instalar uma fonte no seu código HTML que permite que a fonte escolhida seja usada aonde você quiser. Como nos títulos da postagem, cabeçalho, títulos da sidebar, rodapé da postagem e etc.


01. Entre no site Google Web Fonts. Escolha a fonte que deseja e clique em Quick-use.
* Para visualizar melhor a imagem é só clicar sobre ela.



02. Na página que irá abrir, copie o código disponibilizado no passo 3.
* Para visualizar melhor a imagem é só clicar sobre ela.



03. Depois de copiar o código, vá em Modelo > Editar HTML e procure por:

‹head›

Cole o código ANTES de ‹head›, assim:

‹link href='http://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css' /‹head›

OBS: para o código ser aceito no template você deverá acrescentar uma barra (destacada no código) a mais antes de > .

04. Feito isso, copie o código do passo 4 :
* Para visualizar melhor a imagem é só clicar sobre ela.




Agora que a fonte já está instalada, você vai utilizar o código que você copiou no passo 4 para personalizar a fonte que você quer, seja do título do post ou do blog. Você deverá adicionar o código nas seguintes áreas:

Título do blog (código do modelo Minima)
#header h1 {

  margin:5px 5px 0;

  padding:15px 20px;

  text-transform:uppercase;

  letter-spacing:.1em;

  font: $pagetitlefont; /* substitua essa parte pelo código do passo 4 */

}

Título das postagens (código do modelo Minima)
.post h3 {

  margin:.20em 0 0;

  padding:0 0 5px;

  font-size:38px;

  font-weight:normal;

  color:$titlecolor;

  font-family: 'Yellowtail', cursive; /* adicione o código antes do fechamento das chaves */

}

Isto foi só um exemplo. Você pode adicionar fonte personalizada em outros locais também, como no título dos gadgets e no rodapé da postagem, é só procurar o trecho correspondente. Qualquer dúvida ou pedido em relação ao tutorial é só deixar um comentário ou entrar em contato.

Leia Também

0 comentários

Os comentários desse blog são moderados, portanto só serão publicados após aprovação. Comentários com propagandas, divulgações e comentários pedindo para seguir não serão aprovados. Deixe o link do seu blog caso queira que eu retribua algo. Obrigada.

Instagram

Subscribe