Importante!
O site Cufon não está mais disponível, portanto este tutorial não pode mais ser realizado.Mas calma! Tem solução!
Para usar qualquer fonte baixada da internet em seu blog clique no botão abaixo e acesse o tutorial repaginado e moderno, que funciona sem problemas!
Enjoy!
Há, na internet, milhares de fontes lindas que a gente amaria poder usar no blog, nos títulos, por exemplo.
Não é?
Tempos atrás eu mostrei aqui no blog como usar essas fontes do Google Fonts no blog.
Relembre:
Como usar as fontes do Google Fonts no blog?
Acontece que o Diretório de fontes do Google para Webmasters, embora seja muito simples de usar, não possui todas as fontes lindas que a gente quer.
Mas tudo tem jeito nessa vida!
Vou te mostrar hoje um jeito simples de usar qualquer fonte que você desejar em seu blog.
Não é complicado mas precisa atenção, tá?
Vem comigo que te mostro o passo a passo!
Como usar qualquer fonte no blog
Para começar selecione em seu computador a fonte que deseja usar.
Uma recomendação simples e muito útil é: evite exageros! Não use mais de 3 fontes diferentes em seu blog pois pode ficar exagerado.
O ideal é usar uma fonte mais trabalhada, especial, para os títulos e fontes básicas para o texto. Evite usar fontes manuscritas nos textos pois dificulta a leitura e afasta o leitor.
Isso dito, escolha a fonte que você deseja usar, nos títulos do post, por exemplo. Claro, ela precisa estar em seu computador pois precisaremos baixa-la no site que a converterá.
Escolheu a fonte?
Acesse esse site:
Cufon
Lá você verá a página inicial; nela clique no botão Selecionar arquivo.
Assim:
Escolha a fonte que deseja usar e espere carregar.
A seguir role a página e marque as seguintes caixinhas:
Faça essa parte com atenção, tá?
Role mais um pouco a página e marque a caixinha para aceitar os termos. A seguir clique no botão azul.
Assim:
Vai abrir a janela para você baixar o arquivo convertido.
Salve em uma pasta de sua escolha, fácil de localizar.
Agora acesse esse tutorial:
Como hospedar arquivos no Google Sites
Faça todo o procedimento que explico no tutorial e hospede sua fonte convertida.
Importante:
Caso você use outro sistema de hospedagem de arquivos siga com ele, faça do seu jeito.
Meu tutorial citado acima se destina ao leitor que nunca hospedou arquivos em lugar algum ou não sabe como fazer.
Falou?
Sigamos adiante.
Agora vamos ao seu blog instalar o código que faz a mágica acontecer.
No seu painel administrativo do seu blog clique em Modelo e em Editar HTML.
Dentro da caixa de código localize <head>.
Está bem no comecinho.
ACIMA dela cole este código:
Altere onde marquei AQUI O LINK DO ARQUIVO YOURJAVASCRIPT colocando o link que você obteve ao hospedar o arquivo da fonte convertida.
Agora preste atenção nesta parte do código:
<script type='text/javascript'> Cufon.replace
Vamos supor que você queira usar sua fonte especial nos títulos dos posts.
Então você coloca esse comando para mandar que a fonte do título dos posts seja com sua fonte hospedada:
('h3')
Ficaria assim:
<script type='text/javascript'> Cufon.replace('h3') ;</script>
Mas vamos supor que você quira usar a fonte também nos títulos da sidebar.
Aí o comando é esse:
('.sidebar .widget h2')
Ficaria assim se quisesse usar a fonte nos títulos dos posts e da sidebar:
<script type='text/javascript'> Cufon.replace('h3') ('.sidebar .widget h2');
</script>
Percebeu onde acrescentei?
E assim é sucessivamente, com toda área onde desejar usar a fonte.
Selecione onde deseja, encontre o #ID dela e acrescente ('AQUI O #id DE ONDE USAR A FONTE') antes do ponto e vírgula finais que aparecem antes de </script>
No código-base que disponibilizei já deixei configurado para mostrar a fonte especial nos títulos dos posts, dos widgets do footer e nos títulos dos posts relacionados.
Altere para que se adapte à sua necessidade.
Dicas extras - perguntas e respostas
1- Socorro, não consigo copiar os códigos!
Calma, está tudo aqui:
2- E se eu quiser usar mais de uma fonte especial no mesmo blog? Pode?
Não.
Nesse método só é possível, até onde testei, usar uma única fonte especial hospedada.
3- A fonte especial aparece no celular?
Sim, desde que seu blog esteja preparado para ser exibido em celulares e você esteja usando a opção Personalizado caso seu template seja nativo do Blogger.
4- Dá certo em templates baixados da internet?
Sim, mas tem que testar pois cada template desse tipo tem características bem próprias.
Como é algo que requer atenção gravei a execução do tutorial para você ver.
Assista e você vai perceber como é simples depois que pegamos as manhas!
Aproveite e se inscreva no canal de tutoriais do blog:
Espero que você aproveite e se divirta!
Se tiver quaisquer dúvidas referentes ao tutorial diga nos comentários e eu ajudo se for possível.
E se você sentir vontade de me ajudar compartilhe esse post em suas redes sociais!
Fico muito grata!
Enjoy!
12 comentários via Blogger
Dias online
Postagens
comentários
Estava procurando uma forma de colocar uma fonte diferente nos gadgets da sidebar, obrigada pela dica :) Voou tentar fazer lá!
ResponderExcluirBeijos!
Blog Insaturada
Allan, dá certinho.
ExcluirE tem as opções do Google fonts, vi hoje que tem fonte nova por lá :)
bjssss
Como acho difícil essas "manhas" rsrsrs
ResponderExcluirjoturquezzamundial
Beijos.
rsrsrsrs não é difícil não, Jô, é questão de prática mesmo rsrsrsr
Excluirbjssss
Apareceu este erro,
ResponderExcluirErro ao analisar XML, linha 8, coluna 124: The reference to entity "d" must end with the ';' delimiter.
vc pode me ajudar. grato,
Eu não sei o motivo, mas creio que você colocou algum sinal extra...
ExcluirSugiro que releia o tutorial, veja o vídeo. Coloque exatamente como eu disse e vá fazendo testes pois dá certinho :)
realmente esta dando esse erro
ExcluirHola!!
ResponderExcluirMuchas gracias, me ha funcionado a la primera :)
Obrigada!!
Besos :33
bom ... já foi desativado
ResponderExcluirqueria trocar as fontes mas o cufon esta desativado,poderia atualizar esse post?
ResponderExcluirQueria trocar a fonte. Mas o cufon não funciona mais :/ foi desativado :'(
ResponderExcluirNessa, ele saiu do ar, mas aqui no blog já tem tutorial atualizado, com outra forma de usar fontes baixadas da internet:
Excluirhttp://www.elainegaspareto.com/2017/06/como-usar-fontes-personalizadas-no-blog.html
bjsss