quinta-feira, 30 de dezembro de 2010

Como utilizar fontes personalizadas do Google no blogger





No blogger, só podemos utilizar as fontes habituais (Arial, Courier, Times New Roman, Verdana, Impact e Georgia) e outras opções no blogger em rascunho. Isto porque, alguns de nós possuimos muitas mais fontes no nosso PC e podemos aplicá-las no nosso blog, porém nossos leitores se limitarão a ver somente as fontes que eles tem instaladas nos seus computadores. Podemos mudar isso se utilizarmos o Google Fonte API que nos permite utilizar fontes do seu Diretório de Fontes sem ter que se preocupar se seus leitores possuem estas fontes instaladas nos seus PCs pois a API do Google utiliza fontes que estão alojadas no Google.


1. Para escolher a fonte, primeiro vamos em Diretório de Fontes.
2. Clicamos sobre a fonte que queremos e depois em Launch in font previewer para visualizar alguns efeitos que podem ser aplicados à fonte (tamanho da letra, espaçamento, sombra, etc.).
3. Para obter o código clicamos sobre Get the code. Antes de copiar o código, marcamos as caixinhas com as opções (Normal, Italic, Negrito, Negrito Italico) se a fonte escolhida tiver as opções.




Copiamos o primeiro código fonecido colamos antes da </head>. Exemplo:

&lt;link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'&gt;



Para aplicar o tipo de fonte, copiamos o segundo código obtido na fonte do google (veja um exemplo abaixo):

font-family: 'Cantarell', arial, serif;


Vamos colar este código nos lugares indicados em azul:

1. Para o título do nosso blog

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


2. No título de nossas postagens:

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

5 comentários:

Mudeiwane Maxa disse...

o blog ta bom...

Gel_NbK disse...

Me ajudou bastante, obrigado!

Maria Fuentes disse...

obrigada pelas dicas, podem entrar no meu blog para ver o que foi utlizado perderpesogr.blogspot.com

Anônimo disse...

Olá!
Adorei seu tutorial. Super simples, fácil...
Graças as dicas, consegui personalizar a fonte do meu blog!

Obrigada! :D
Um beijo!

suuky.tumblr.com

Jonathan disse...

Vim à procura de exatamente isto, post simples e direto ao ponto.Obrigado pela dica.

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...