Como usar qualquer fonte (baixada da internet) no blog?

em 25 de outubro de 2016

Como usar qualquer fonte (baixada da internet) no blog?

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:


Copiar o 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:
(&#39;h3&#39;)

Ficaria assim:

<script type='text/javascript'> Cufon.replace(&#39;h3&#39;) ;</script>

Mas vamos supor que você quira usar a fonte também nos títulos da sidebar.
Aí o comando é esse:

(&#39;.sidebar .widget h2&#39;)

Ficaria assim se quisesse usar a fonte nos títulos dos posts e da sidebar:

<script type='text/javascript'> Cufon.replace(&#39;h3&#39;) (&#39;.sidebar .widget h2&#39;);
</script>

Percebeu onde acrescentei?
E assim é sucessivamente, com toda área onde desejar usar a fonte.
Selecione onde deseja, encontre o #ID dela e acrescente (&#39;AQUI O #id DE ONDE USAR A FONTE&#39;) 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:

Copiar o código


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!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

6 comentários , comente também!

  1. Estava procurando uma forma de colocar uma fonte diferente nos gadgets da sidebar, obrigada pela dica :) Voou tentar fazer lá!
    Beijos!
    Blog Insaturada

    ResponderExcluir
    Respostas
    1. Allan, dá certinho.
      E tem as opções do Google fonts, vi hoje que tem fonte nova por lá :)
      bjssss

      Excluir
  2. Como acho difícil essas "manhas" rsrsrs
    joturquezzamundial
    Beijos.

    ResponderExcluir
    Respostas
    1. rsrsrsrs não é difícil não, Jô, é questão de prática mesmo rsrsrsr

      bjssss

      Excluir
  3. Apareceu este erro,

    Erro ao analisar XML, linha 8, coluna 124: The reference to entity "d" must end with the ';' delimiter.
    vc pode me ajudar. grato,

    ResponderExcluir
    Respostas
    1. Eu não sei o motivo, mas creio que você colocou algum sinal extra...
      Sugiro que releia o tutorial, veja o vídeo. Coloque exatamente como eu disse e vá fazendo testes pois dá certinho :)

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…