Capitão america
Como usar fontes diferentes no Blog
BY PAPO GAROTA QUINTA-FEIRA, SETEMBRO 19, 2013 PNGS, TEMPLATE FREE, TUTORIAL BLOG
Olá meninas! O Papo Garota de hoje traz mais um tutorial super útil, a pedido de uma leitora muito querida. Quem já fez o seu pedido pode aguardar que eu vou fazer *_*
Quer usar uma fonte linda no tÃtulo do post ou na sidebar?
Quer usar uma fonte linda no tÃtulo do post ou na sidebar?
Ao abrir o site você vai encontrar diversas fontes com exemplos escritos para ficar melhor a escolha, então basta escolher a fonte desejada, para ajudar eu deixo alguns exemplos de fontes que eu particulamente acho lindas para usar no menu, post, sidebar etc.
- Sofia
- Dancing Script
- Cookie
- Sacramento
- Lobster
- Lily Script One
- Bubbler One
Depois de escolher a fonte clique em Quick-use, no mesmo quadrado da fonte que vc escolheu.
Copie o primeiro código que aparece, conforme exemplo:
Feito isso, abra o modelo HTML do seu layout e procure por: <head>
Logo abaixo, cole o código que você copiou.
Agora, coloque uma barra / ao final do endereço, antes de >
Ficará assim:
Sem a barra:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Com a barra:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
Obs: Se não fizer isso o código não funciona
Em seguida, volte para a página Google Fonts e copie o segundo código, e então cole ele onde você quer que a fonte esteja.
Exemplos:
Se for no tÃtulo da postagem, procure por: .post h3 {
e cole o código abaixo dele.
Para os tÃtulos da sidebar, procure por: .sidebar h2 {
e cole o código abaixo dele
Para o tÃtulo do Blog, procure por: #header h1 {
e cole o código abaixo dele
Para o texto da postagem, procure por: .post {
e cole o código abaixo dele
Agora é só salvar, e ver o resultado!
Dicas:
Para aumentar ou diminuir o tamanho da fonte mude essa numeração:
font-size:20px;
Para deixar as letras da fonte todas maÃsculas acrescente este código abaixo do local desejado:
text-transform:uppercase;
Feito isso, abra o modelo HTML do seu layout e procure por: <head>
Logo abaixo, cole o código que você copiou.
Agora, coloque uma barra / ao final do endereço, antes de >
Ficará assim:
Sem a barra:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Com a barra:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
Obs: Se não fizer isso o código não funciona
Em seguida, volte para a página Google Fonts e copie o segundo código, e então cole ele onde você quer que a fonte esteja.
Se for no tÃtulo da postagem, procure por: .post h3 {
e cole o código abaixo dele.
Para os tÃtulos da sidebar, procure por: .sidebar h2 {
e cole o código abaixo dele
Para o tÃtulo do Blog, procure por: #header h1 {
e cole o código abaixo dele
Para o texto da postagem, procure por: .post {
e cole o código abaixo dele
Agora é só salvar, e ver o resultado!
Dicas:
Para aumentar ou diminuir o tamanho da fonte mude essa numeração:
font-size:20px;
Para deixar as letras da fonte todas maÃsculas acrescente este código abaixo do local desejado:
text-transform:uppercase;
Se a fonte estiver com as letras todas maÃsculas troque "text-transform:uppercase;" por: text-transform:none;
Gostou do tutorial? Curta a fanpage do Blog que vem muito mais por aÃ!
Qualquer dúvida, me escreva um comentário.
Beijos 
