• O BLOG MUDOU DE ENDEREÇO! CLIQUE AQUI E ACESSE byjaque.com
  • Personalizando as fontes do blog

    domingo, março 03, 2013

    Atendendo a pedidos finalmente vou mostrar como personalizar as fontes do blog através das fontes personalizadas do Google (como as que eu uso aqui no blog) . É um tutorial simples, mas requer um pouco de atenção. Ele consiste basicamente em instalar uma fonte no seu código HTML que permite que a fonte escolhida seja usada aonde você quiser. Como nos títulos da postagem, cabeçalho, títulos da sidebar, rodapé da postagem e etc.


    01. Entre no site Google Web Fonts. Escolha a fonte que deseja e clique em Quick-use.
    * Para visualizar melhor a imagem é só clicar sobre ela.



    02. Na página que irá abrir, copie o código disponibilizado no passo 3.
    * Para visualizar melhor a imagem é só clicar sobre ela.



    03. Depois de copiar o código, vá em Modelo > Editar HTML e procure por:

    ‹head›

    Cole o código ANTES de ‹head›, assim:

    ‹link href='http://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css' /‹head›

    OBS: para o código ser aceito no template você deverá acrescentar uma barra (destacada no código) a mais antes de > .

    04. Feito isso, copie o código do passo 4 :
    * Para visualizar melhor a imagem é só clicar sobre ela.




    Agora que a fonte já está instalada, você vai utilizar o código que você copiou no passo 4 para personalizar a fonte que você quer, seja do título do post ou do blog. Você deverá adicionar o código nas seguintes áreas:

    Título do blog (código do modelo Minima)
    #header h1 {
    
      margin:5px 5px 0;
    
      padding:15px 20px;
    
      text-transform:uppercase;
    
      letter-spacing:.1em;
    
      font: $pagetitlefont; /* substitua essa parte pelo código do passo 4 */
    
    }

    Título das postagens (código do modelo Minima)
    .post h3 {
    
      margin:.20em 0 0;
    
      padding:0 0 5px;
    
      font-size:38px;
    
      font-weight:normal;
    
      color:$titlecolor;
    
      font-family: 'Yellowtail', cursive; /* adicione o código antes do fechamento das chaves */
    
    }

    Isto foi só um exemplo. Você pode adicionar fonte personalizada em outros locais também, como no título dos gadgets e no rodapé da postagem, é só procurar o trecho correspondente. Qualquer dúvida ou pedido em relação ao tutorial é só deixar um comentário ou entrar em contato.

    Leia Também

    0 comentários

    Os comentários desse blog são moderados, portanto só serão publicados após aprovação. Comentários com propagandas, divulgações e comentários pedindo para seguir não serão aprovados. Deixe o link do seu blog caso queira que eu retribua algo. Obrigada.

    Instagram

    Subscribe