Postei há algum tempo sobre como usar qualquer fonte no blog, hospedando-as em sites e depois adicionando ao html do seu template. Nesse post vou mostrar outra forma de se fazer isso (que aprendi com a Giza Veiga na época do Candylland), com a diferença de que dessa maneira não é preciso hospedar os arquivos de fonte, basta apenas adicionar um código ao seu template, antes de /b:skin.
Para isso, vamos precisar do site Font Squirrel. Depois que acessar o site e já com a fonte que deseja usar escolhida, clique em Upload Fonts. Vou usar essa fonte de emojis como exemplo. Marque as opções como na imagem abaixo:
É importante deixar marcado aquela parte que diz Base64 Encode. Depois de tudo pronto, clique em Download Your Kit.
No arquivo baixado, há uma pasta (specimen_files), as fontes no formato woff, um documento de texto, um arquivo de demonstração e a folha de estilos (stylesheet).
Clique nesse arquivo stylesheet com o botão direito e escolha Editar ou, se usa o Notepad, Editar com Notepad.
Copie todo o código do arquivo e cole no html do seu template antes de /b:skin. Salve.
Quando quiser usar a fonte, basta se lembrar do nome da font-family que veio no seu código e aplicá-la na parte desejada do template, tipo em títulos, blockquotes... mostrei como naquele post.
Se quiser visualizar como sua fonte fica, clique no arquivo de demosntração que veio no kit que baixou. Lá você pode ver informações sobre como usar font-face, os diversos tamanhos para escolher o que fique melhor, os símbolos e seus 'atalhos'...
Por exemplo, a emoji font que estou usando; primeiro, acrescentei o código dela no meu template como disse acima e salvei.
Depois, criei uma outra class antes de /b:skin para personalizá-la, algo como:
.icone {
font-family: 'emojifontregular';
font-size: 36px;
color: deepskyblue;
}
.icone:hover {
color: lightblue;
}
E onde quero que apareça:
<span class='icone'>C</span>Deixei assim, com o código do coraçãozinho fornecido na font-face.
No lugar de .icone, você poderia por a class referente ao local em que vai usar, claro dependendo de onde for não se usa uma fonte de símbolos. E o legal é que funciona na maioria dos navegadores mais populares:
v
j
G
K
S
Imagem de abertura do post: Weheartit.com
0 Comentários
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 - Deviantart