Já se foi a época em que usávamos imagens pra assim definir diferentes fontes em nossos sites e, com isso, deixava a navegação super pesada e um site super estático. Hoje em dia ainda podemos brincar com imagens mas usando o método sprite, mas essa técnica fica para o próximo post, vamos ao que importa…
Vou citar aqui 3 formas de utilizar fontes diferentes das padrões que você geralmente seta no seu CSS:
1º Método Google Web Fonts
É o método mais simples, porém o mais limitado.
Nosso amigo Google um dia lançou o “Google Web Fonts”, um jeitinho muito fácil de você incorporar ao seu CSS fontes diferentes, sem precisar ter essas fontes instaladas no seu computador ou mesmo colocá-las em seu servidor. Por enquanto foi o método mais fácil que achei, porém há a limitação de fontes, já que você só poderá escolher entre o número de fontes (no momento 397) que o Google tem ali.
Como funciona:
1- Entre no Google Web Fonts, procure a fonte que mais te atrai e aperte Add to Collection. No rodapé aparecerá todas as fontes escolhidas por você.
2- A seguir clique em Use, que fica nesse rodapé azul. Se você escolheu só uma fonte, ele irá mostrar esta e no “termômetro” ao lado mostrará qual impacto essa fonte terá em sua página. Caso tenha escolhido mais de uma fonte, você poderá selecionar só as que quizer ou todas ao mesmo tempo. Lembre-se sempre de verificar no termômetro se seu site ficara muito pesado com o número de fontes.
3- Descendo nessa mesma página está o script que fará com que a fonte funcione em seu site. Aconselho a escolher o método Standart mesmo, é o mais simples. Copie o texto e cole em seu html acima da tag . E no seu CSS chame a fonte usando o font-family indicado lá também.
Exemplo:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'">
<style>
body {
font-family: 'Chelsea Market', cursive;
font-size: 48px;
}
</style>
</head>
<body>
<div>Usando a fonte Chelsea Market!</div>
</body>
</html>
E pronto!
2º Método Cufón
Mais difícil e acho que demora muito na renderização.
No Cufón não há barreiras para impedir que sua fonte favorita seja colocada no seu site! O método não é tão simples como o descrito acima, já que precisamos baixar um arquivo, tranformar outro, escrever o código certinho e por aí vai.
Esse método foi desenvolvido em JavaScript e funciona pegando os caracteres da sua fonte, transformando em uma fonte SVG, e depois converte usando JSON. Achou difícil? Entender é pior que fazer!
Como funciona:
1- Primeiramente baixe o arquivo cufon-yui.js. Você vai declarar este arquivo em qualquer lugar acima da sua tag .
2- Depois você terá que ir no site gerador de Cufón e seguir todos os passos para colocar a sua fonte lá gerando então o arquivo “nomedafonte.js”. Pra quem se embolou nessa parte, siga os próximos passos para saber como usar o gerador:
2.2- Marque a caixinha do “The EULAs of these fonts allow Web Embedding (without Adobe Flash)”.
2.3- Na próxima etapa NÃO marque a caixa All, isso deixa extremamente pesado. Ou deixe só o “Basic Latin” marcado, ou acrescente “Punctuation”, “Lowercase” ou “Uppercase”, se for o caso.
2.4- Na caixa “and also these single characters”, coloque isso: “áéíóúàçãõ”. Isso forçará a entrada desses caracteres especiais. Não é obrigatório, só é um conselho.
2.5- Por último, marque a caixinha “I acknowledge and accept these terms” e mande gerar sua fonte.
3- Após gerada a fonte.js, coloque a chamada logo abaixo de onde vc declarou o “cufon-yui.js”.
4- Ainda não acabou, depois disso tudo você ainda tem que ligar a fonte à tag que você quer mostrar, utilizando javascript.
Vamos ver o exemplo completo para entender melhor:
<html>
<head>
<script src="cufon-yui.js"></script>
<script type="text/javascript" src="Chelsea_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>Usando a fonte Chelsea Market!</h1>
</body>
</html>
Caso você precise usar mais de uma fonte no seu site, é só chamar assim:
<script type="text/javascript">
Cufon.replace('#id',{ fontFamily: 'Chelsea Market' });
Cufon.replace('.classeCss',{ fontFamily: 'Myriad Pro' });
Cufon.replace('#id p',{ fontFamily: 'LeagueGothic' });
</script>
3º Método @font-face
O melhor método na minha opinião.
Uso aqui no Gaiuss, é rápido, leve e não precisa de tantas voltas como no Cufón. Nesse método a sua fonte vai ser tranformada em 4 tipos e daí é só “ligar” no seu CSS e pronto!
Como funciona:
1- Escolha sua fonte e vá até o site Font Squirrel @font-face Kit Generator
2- Clique em Add Fonts, escolha quantas fontes você quiser, deixe em Optimal e marque o “Yes, the fonts I’m uploading are legally eligible for web embedding.” Então, Download Your Kit.
3- Você receberá um zip com vários arquivos, mas o que interessa nele são os arquivos com extensão “eot”,”svg”,”ttf” e “woff”. Coloque esses arquivos na pasta do seu site (de preferencia, crie uma pasta “fontes” pra ficar mais organizadinho né).
4- A seguir abra o stylesheet.css que veio no seu zip, nele vem o exemplo da chamada que você fará no seu CSS. Copie e cole no topo do seu arquivo CSS e use o font-family definido nele nas duas classes e ids.
Exemplo:
<html>
<head>
<style>
@font-face {
font-family: 'LeagueGothic';
src: url('fontes/leaguegothic-webfont.eot');
src: url('fontes/leaguegothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fontes/leaguegothic-webfont.woff') format('woff'),
url('fontes/leaguegothic-webfont.ttf') format('truetype'),
url('fontes/leaguegothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'LeagueGothic';
font-size:18px;
}
</style>
</head>
<body>
<div>Usando o @font-face!</div>
</body>
</html>
Acabou!
Espero que tenha explicado tudo direito, quem não conseguir finalizar algum método ou tiver alguma opinião sobre qual é melhor, é só comentar!
