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:
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.
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:.
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...):
.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
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
Adorei o seu Tutorial!! Eu queria te perguntar como vc fez um aplicativo para o seu blog??
ResponderExcluirthereza-place.blogspot.com
Fico feliz que tenha gostado :)
ExcluirEu o fiz nesse site.
Bju...
Oie tudo bem?!
ResponderExcluirMuito 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!
Obrigada ^^
ExcluirPara 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
Comigo não está funcionando, help aqui!
ResponderExcluirJá 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?
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