Acessórios Fontes Vanessa S.
Fontes Diferentes para usar no Blogger
No dia 19 de maio o Blog do Google Code anunciou uma excelente novidade.
O Google API agora disponibiliza um conjunto de fontes de alta qualidade na web e que podem ser usadas no blogger. E o melhor, são fontes gratuitas, licenciadas e armazenadas no próprio Google.
Não necessita hospedar arquivo nenhum, e nem o uso de nenhum script.
Com esta novidade, temos a possibilidade de usar fontes diferentes das tradicionais em nossos blogs, e com isso dar um ar bem diferente aos títulos, cabeçalho ou textos.
Para aplicarmos essas fontes no blog, é necessário instalarmos uma linha de código referente a fonte disponível, feito isso você poderá usar fontes on line armazenadas pelo Google, e seu servidor cuida de converter a fonte em um formato compatível com qualquer browser moderno (incluindo Internet Explorer 6 ou superior).
Por enquanto podemos contar com uma pequena variedade de fontes de código aberto, mas o Google tem trabalhado com um número de talentosos designers de fonte para a produção de uma variada coleção de alta qualidade.
Para conferir a variedade de fontes, e instalar em seu blog, basta visitar a página Google Font Directory.
1) Escolha a fonte que você gostou, clique em cima dela, e depois clique em “Get the code“.
2) Copie o código disponibilizado dentro da 1ª caixinha.
3) Apague o trecho: &subset=latin no código.
3) Para o código ser aceito no seu template, acrescente uma barra / no final do código (a barra deve ficar antes de > ).
O código deverá ficar assim:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>
4) Agora entre na edição HTML do seu blog, e cole o código ACIMA de </head>
Fazer com que o template reconheça a nova fonte instalada:
Agora que você já instalou a chamada do código da fonte que você escolheu, você pode aplicar a nova fonte em qualquer elemento que você desejar, é só acrescentar a chamada CSS de tipo da fonte (font-family: ‘Yanone Kaffeesatz’, Arial, Serif;)no elemento que você quer, para fazer a fonte funcionar.
Você precisa definir no CSS o tipo de fonte e a familia da fonte: “font-family“.
Exemplo 1:
Para aplicar uma fonte no Titulo do blog (Header/cabeçalho), você deve definir o tipo de fonte em:
#header h1
Desta forma:
#header h1{
font-family: 'Yanone Kaffeesatz', arial, serif;
}
Exemplo 2:
Para aplicar a fonte nos títulos dos post, você deve localizar o código CSS , que geralmente é .post h3 ou .post-title, dependendo do modelo do seu template.
E acrescente o código defindo o tipo de fonte.
.post h3{
font-family: 'Yanone Kaffeesatz', arial, serif;
}
Recomendo que leia o artigo que trata sobre como Personalizar os títulos dos posts. Veja o item sobre “Definir tipo de fonte para o título”.
Nos exemplos acima eu apliquei a fonte ‘Yanone Kaffeesatz’, porque foi a fonte que escolhi para utilizar como exemplo, mas você deve colocar o nome da fonte que você escolheu.
Para saber a família da fonte que você escolheu, basta copiar a parte que aparece em negrito, no código disponibilizado na 2º caixinha, fornecido pelo site.
Essas fontes também funcionam bem com aplicação de CSS3, portanto você pode incluir vários efeito, como Efeito Sombra , por exemplo.
Bom , é isso!
Boa blogagem…
Olá!
Gostaria de saber como faço para alterar tamanho e fonte do titulo(cabeçalho) do meu blog?
poderia me ajudar por favor?
Obrigado
quando eu testei com o seu codigo deu certo, mas quando escolhi a minha fonte não funcionou, porque será?
Não aconteceu nada. Coloquei o código exatamente em cima de /head e também o código de font-family, que eu imagino também estar no lugar correto. Mas não mudou nada!
INCRÍVEL, parabéns pela dica!
Não respondo nenhum tipo de pergunta por email. Mais informações, leia os Termos de Uso do Blog.
Sobre os títulos da minha sidebar eu uso imagem como titulo. Já publiquei um tutorial ensinando a fazer isso:
Substituir Títulos da Sidebar por Imagens
Olá, clau! Gostei muito dessa matéria sobre fontes! Há uma coisa que eu gostaria muito de saber na qual iria me ajudar muito! tenho anúncios da google no meu blog, mas uma coisa é que gostaria de centraliza-los e outra é fazer como no seu blog escrever "Publicidade" em cima para saberem o que é! E com essa fonte diferente e elegante que vc usa! E gostaria também se você puder forcener uma dica para tirar aquela barra de pesquisa que já vem com o template sabe? Muito Obrigado des de já! Seu blog é maravilhoso!!! Bom de uma olhada no meu blog, para se Puder responder as minhas perguntas!
http://www.mascarasdaverdade.blogspot.com
ou pelo e-mail
maykel.winchester@hotmail.com
Abraço, bom restinho de semana!
Andreza
Dá uma relida no tutorial,pq eu acrescentei uma informação no item 3. Tenta apagar o trecho "&subset=latin" no código, acho q é isso q estava dando erro pra vc.
Sim, eu defini! Mas fica aparecendo o mesmo erro: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The reference to entity "subset" must end with the ';' delimiter.
Escravo de maria
Já entendi o q aconteceu. Este recurso foi lançado no dia 19 de maio deste ano, e eu publiquei o post no dia 21 de maio. O próprio Google API modificou o "embed", pq antes não aparecia esse trecho "&subset=latin" e agora ele aparece. Acabei de ir no site testar e verifiquei isso, portanto, já atualizei o post incluindo novas imagens demonstrativas tb.
Obrigada pelo toque.
Copie o código que está na primeira caixa “Embed the font into your page”, entre na pagina do blogger e procure por e cole o código, mas coloque uma barra no final do código e retire o trecho &subset=latin senão o blogger não aceitará na hora de salvar, ou seja, o código ficará mais ou menos assim:
o dicas para Blogs resolveu este problema _clike aqui
Andreza
Vc está definindo o tipo de fonte no elemento que quer usar a fonte? Se não definir, ela não vai aparecer automaticamente em lugar algum. Para ela funcionar, não basta somente instalar a fonte, tem q definir o tipo de fonte q vc escolheu no elemento q vc quer.
Dá uma relida no tutorial.
Clau, comigo deu o mesmo erro 🙁
Eu fiz tudo certinho, tá assim "/>"
Escravo de maria
Leia o comentário número 11. Talvez possa ser isso.
Não foi possível salvar o modelo
Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The reference to entity "subset" must end with the ';' delimiter.
o que devo fazer?
Poxa Clau, vlw pela dica… outro gol de placa seu.
Fico te devendo mais essa.
Abraço
Dea Carvalho
Vc observou se acrescentou uma barra "/" no final do código? A barra deve ficar antes de ">"
Interessante… tentei com uma fonte diferente, a Reenie Beanie e não deu certo. Segui exatamente as instruções. Com a fonte que você escolheu dá certo, já com a Reenie Beanie não…
MVA
Isso é problema de configurações do seu windows, não tem nada a ver com o template. Vc vai ter q mexer nas suas configurações do curso no seu pc.
Oi. Acabei de mudar o template do meu blog e estou com um sério problema. A cor do cursor/ponteiro de seleção de texto está cinza. E isso está dificultando muito na hora que vou escrever os posts no Windows Live Writer, porque não consigo enxergar onde o texto está selecionado e vira uma bagunça. Não consegui achar na internet nenhum código para mudar isso. Você saberia me ajudar?
Muito obrigada!
Clau, vc é 10!!! Deu certinho!!!
Beijos
@Blog de Gisoalves
Muito obrigada pela visita e pelo comentário. Eu quem agradeço sua presença e volte sempre!
@Achei na internet:
Temos vários tutoriais que ajudam a encrementar seu blog, dá uma olhada no nosso indice que com certeza vc vai encontrar alguma coisa que te ajude:
Tutoriais para blogger – Indice.
Oi,voce parece ser bastante esperiente em Blogger,sou novo em blogger,voce poderia me ajudar ???…Bom,depois de criar meu blogger :http://www.blogger.com/html?blogID=522757649703389854 eu baixei um template e coloquei,repara que quando eu posto alguma coisa fica uma parada rosa em cima dos titulo lah,nao sou muito fan da cor,queria trokar,voce sabe como faço isso ???…Espero respostas ! pag. em favoritos …vlws
AMEI TODAS AS DICA DESTE BLOG, O DONO DESTE BLOG ESTÁ DE PARABÉNS POR ESTE LINDO TRABALHO,EU ADOREI O MENU FLUTUANTE DE COLAGEM, E SUPER INTERESSANTE,( UM TIK TAK PARA VC ATÉ MAIS)
@Priscilla de la Fleuret:
Fico feliz que tenha gostado…obrigada pela visita e volte sempre!
@Avelino:
Olha pra ser sincera, eu nunca mudei nada disso e vejo que meu SEO anda muito bem obrigada…=)
Vc deve tomar cuidado em modificar demais seu template, isso pode acabar, ao invés de ajudando, te atrapalhando.
Olá Clau!
Gostei da dica de mudar as fontes do blog,mais tem uma coisa que me aborrece não consigo mudar o titulo do post depois de ter mudado .post h3 para .post h1 ,porque no ebook do icebreak ensina a fazer isto para melhorar o seo do blog,mais agora só pelo painel que muda as cores,fontes e tamanho que consigo alterar,no codigo eu altero e não muda nada,não sei porque…
Abraços!
Adorei a novidade,hihi.Mas por enquanto vou aguardar sair novas fontes =P
Bjocas