Personalizando as fontes do blog
domingo, março 03, 2013Atendendo 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.
Créditos: Jackie Dream e Camila Designs
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.