Como Usar as Fontes (letras) do Google em seu Blog

12 set


image
Recentemente o Google lançou um diretório de fontes (letras) muito bonitas e de alta qualidade para serem usadas gratuitamente em qualquer página da web. Acessando a página do Google Fonts Directory , você pode escolher uma letra diferente das que estão disponíveis no Blogger que são:  Georgia, Arial, Trebuchet, Courrier, Impact, Times New Roman, Trebuchet e Verdana.
No diretório encontraremos 18 tipos de fontes. Eu usei a fonte LOBSTER para o cabeçalho do template Retro Vintage Também apliquei um efeito CSS text-shadow e ficou bem bacana.
Bem Vamos ver como usar:
Primeiro você vai ao Google Fonts Directoy, escolhe a fonte que deseja e ao clicar sobre ela verá ao lado. (No exemplo escolhi Lobster) ► “Click to embed Lobster
image
Na pagina seguinte você poderá visualizar todos os detalhes da letra que escolheu. Para pegar o código, clique em “Get the code
image
Na pagina seguinte você verá o primeiro código dessa maneira:
image

IMPORTANTE !! Para que o Blogger aceite, copie o código e acrescente no final dele o seguinte:

Ficará assim:

Muito bem, agora vamos ao Blogger, na sua página “Editar HTML”  procure a tag e cole o código logo abaixo  dela.

Vamos inserir o código CSS onde queremos que a letra apareça segundo o diretório nos indica:

image

font-family: ‘Lobster‘, arial, serif;

Em um template Mínima do Blogger por exemplo, usariamos assim no título do blog:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: ‘Lobster’, arial, serif;
}

E desta outra forma nos títulos dos posts:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-family: ‘Lobster’, arial, serif;
line-height:1.4em;
color:$titlecolor;
}

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: