Antes era complicado exibir fontes externas em web design. Além da pouca variedade com permissão de uso na internet, precisava-se criar um arquivo a partir da fonte, no formato .eot, para correta visualização em certos navegadores. Isso sem contar a parte de CSS para criar a estilização.
Fontes externas são aquelas que o visitante da página não tem no próprio computador. Se você usar, por exemplo, a Helvetica em algum estilo no seu blog e o visitante não a tiver instalada, o navegador aplicará outra fonte ali, mudando o design original que você planejou. Dependendo da situação, pode alterar totalmente a formatação da página e até torná-la ilegível, em casos de grande variação de tamanho entre a que deveria ser exibida e a que foi usada em substituição.
Mais recentemente, a vida dos designers web foi facilitada com sites como Fontsquirrel, que oferece centenas de pacotes com todo o kit para o @font-face, regra responsável por tornar a fonte aplicável através da propriedade font-family. No arquivo já estão incluídos diferentes formatos da fonte, para total compatibilidade com os navegadores atuais e até a regra em CSS para aplicá-la.
Mas se você mesmo assim não consegue usar fontes externas porque não tem conhecimento algum de estilização, o Google (sempre ele) oferece uma grande facilidade, o Web Fonts. É uma coleção de fontes para web, onde basta copiar o código fornecido lá e aplicar em seu blog ou site para usá-las, sem maiores complicações como envio de arquivos para seu servidor.
Veja como é simples de usar. Vamos supor que você gostou da fonte Press Start 2P, que quase ninguém tem instalada – mas isso não será problema, pois ela será carregada do arquivo do Google.
1 – Escolha de estilos. Algumas fontes terão vários estilos próprios, como versões em itálico, negrito, leve… se quiser usar muitos deles, vá marcando as caixas. Quanto mais estilos usar, mais fontes serão carregadas, o que vai causar uma pequena perda no tempo de carregamento do blog; logo, se só pretende usar uma versão, carregue apenas ela. Veja o item 5.
2 – Conjunto de caracteres. Dependendo do idioma do site ou blog, pode ser preciso usar caracteres mais extensos. Em condições normais, apenas o Latin é suficiente.
3 – Código. Basta copiar o código fornecido e colá-lo no seu blog. O melhor lugar para fazer isso é dentro da seção <head>, assim a fonte será carregada logo no começo.
Na guia @import, você consegue um trecho de CSS que vai importar a fonte direto pela folha de estilos. Se nenhuma das opções funcionar, ainda resta o código em Javascript.
4 – Integrando a fonte ao blog. É o trecho de estilização que chama a fonte para funcionar; basta colar isso na sua folha de estilos e usar a font-family onde quiser. Por exemplo, se quiser todos os cabeçalhos h1 com aquela fonte, use:
5 – Tempo de carregamento. Quanto mais próximo do vermelho estiver o “velocímetro”, mais aquela fonte vai pesar no carregamento da página que a usa. Então, lembre-se de usar web fonts com moderação para não deixar seu blog lerdo.
Muito simples. Só não saia usando todas as fontes que encontrar, ou o reflexo no tempo de carregamento do blog será cruel. É pra ser apreciado com moderação, muita moderação.
Clicando em Pop-Out, você abre uma janela que exibe todos os caracteres disponíveis na fonte. Isso é importante, pois se ela não tiver acentos e cedilha, apresentará erros com textos em português. Se for o caso, escolha outra fonte.
