In Tutoriais

Usando Qualquer Fonte no Blog com @font-face

Imagem: Pixabay

Olá! Quando mostrei como usar fontes diferentes no blog nesse post aqui, citei como uma das formas usar @font-face. Quando você aplica isso no CSS do seu blog, poderá utilizar fontes que estejam salvas ou instaladas em seu computador. Hoje vou detalhar melhor como usar; eu prefiro essa maneira para que qualquer fonte funcione sem erros (pelo menos até hoje não deu errado em todas as vezes que tentei).
A estrutura básica para font-face, que deve ser colada antes de /b:skin ou entre <style> e </style> é essa:
@font-face {
    font-family: 'nome da fonte';
    src: url('URL-DA-FONTE.eot');
    src: url('URL-DA-FONTE.eot?#iefix') format('embedded-opentype'),
         url('URL-DA-FONTE.woff') format('woff'),
         url('URL-DA-FONTE.ttf') format('truetype'),
         url('URL-DA-FONTE.svg#nome da fonte') format('svg');
    font-weight: normal;
    font-style: normal;

}
Para entenderem melhor, vamos a um exemplo prático. E para facilitar, vamos usar um site chamado Font Squirrel; nele você encontra fontes diversas para download com permissão de uso na web, e um gerador para enviar fontes do site ou não, para gerar um kit para font-face.
Primeiro, escolha uma fonte. Se precisar, veja aqui algumas sugestões ou pesquise aqui no blog.
Para exemplo, vou usar duas do site mesmo: a FontleroyBrown, bonita para títulos e textos em destaque, e a fonte Web Symbols, que permite utilizar icons.

Note que ao acessar a página da Fontleroybrown, há uma aba chamada Webfont Kit; clique nela. Veja que o site te dá opção de baixar 4 formatos de fontes: TTF, EOT, WOFF, SVG, que aparecem na estrutura do código acima. Clique em Download @font-face kit. Para ficar organizado, extraia seu download para uma pasta. Eu uso WinRar:
Abra a pasta e encontre os arquivos de fonte do tipo .eot, .woff, .ttf e .svg. Hospede esses 4 arquivos em sites como Dropbox, por exemplo. Copie o link deles e cole naquele código que mostrei, assim:

@font-face {
    font-family: 'fontleroybrownregular';
    src: url('URL-DA-FONTE.eot');
    src: url('URL-DA-FONTE.eot?#iefix') format('embedded-opentype'),
         url('URL-DA-FONTE.woff') format('woff'),
         url('URL-DA-FONTE.ttf') format('truetype'),
         url('URL-DA-FONTE.svg#fontleroybrownregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Uma dica para quem usa Dropbox: hospede em pasta pública e lembre-se de não reduzir o link onde sua fonte estiver hospedada, para manter os formatos.

Já na fonte Web Symbols, se você clicar em webfont kit não poderá baixar o kit font face, mas apenas a fonte. Clique em Download. Extraia a fonte em uma pasta ou local de sua preferência.

Abra o Webfont Generator, clique em Add Fonts, escolha a fonte que deseja enviar, no caso, vou enviar a fonte web symbols, espere carregar, depois clique em Download your kit.

Extraia os arquivos em uma pasta, encontre as fontes do tipo .eot, .woff, .woff2, .ttf e .svg. Hospede esses arquivos em sites como Dropbox, e copie o link deles, colando no código abaixo:.
@font-face {
    font-family: 'web_symbolsregular';
    src: url('URL-DA-FONTE.eot');
    src: url('URL-DA-FONTE.eot?#iefix') format('embedded-opentype'),
         url('URL-DA-FONTE.woff2') format('woff2'),
         url('URL-DA-FONTE.woff') format('woff'),
         url('URL-DA-FONTE.ttf') format('truetype'),
         url('URL-DA-FONTE.svg#web_symbolsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Pronto! Agora é só aplicar font-family: 'nome da fonte'; a alguma class ou onde quiser que apareça, tipo, nos títulos dos posts, dos comentários (.post h3 a, .post h3 a:visited, .post h3, .comments h4), ou da sidebar (.sidebar .widget h2)... (dê uma olhada nesse post para te auxiliar quanto ao nome de algumas classes de postagens e sidebar).
.sidebar .widget h2 {
font-family: 'fontleroybrownregular';
}

E os icons em qualquer área, criando uma class, tipo:
.nome da class {
font-family: 'web_symbolsregular';
}
<div class='nome da class'>
a b c d e f g h i j k l m n o p q r s t u v w x y z <= vão aparecer símbolos no lugar do alfabeto
</div>
Ficando assim (claro, você irá adicionar ao CSS cores, tamanhos, sombras...):

Exemplo de como ficaria um texto ou título com a fonte.

a b c d e f g h i j k l m n o p q r s t u v x z w y
A B C D F H I J K L M N O P Q R S T U V X Z W

OÉ isso; espero que tenham gostado do post!O

Related Articles

6 comentários:

  1. Adorei o seu Tutorial!! Eu queria te perguntar como vc fez um aplicativo para o seu blog??
    thereza-place.blogspot.com

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado :)
      Eu o fiz nesse site.
      Bju...

      Excluir
  2. Oie tudo bem?!
    Muito Obrigada pelo tuto, to com ua duvida
    A minha fonte possui apenas o ttf, da certo mesmo assim?!
    Bjos Amo seu blog serio ele e muito fofo!

    ResponderExcluir
    Respostas
    1. Obrigada ^^
      Para dar certo é necessário além do ttf aqueles outros tipos que aparecem no código. Você pode enviar a fonte ttf para o FontSquirrel que ele gera todos os formatos para o font face :3

      Excluir
  3. Comigo não está funcionando, help aqui!

    Já hospedei em todo quanto é lugar, até mesmo em um servido próprio que possuo e em nenhum deles está dando certo. Agora com essa história da "httpS" parece que o Blogspot tenta "verificar" cada link do código fonte e ele substitui por um do Google que acaba dando "Page not found" (isso no servidor que possuo). Ví que você hopedou no Dropbox, mas lá deu erro de "Cross-Origin Resource Sharing" (no meu servidor eu consegui resolver isso mudando os cabeçalhos pelo ".htaccess", ENFIM! Como você pegou o link do Dropbox para colocar no src?

    ResponderExcluir
    Respostas
    1. Eu copiei a url completa de cada formato que hospedei (click no arquivo, copiar link, aparece uma janelinha com o link), algo como url(https://linkdafonte.eot) ou url (https://linkdafonte.ttf)... e substituí no código ^^

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart