Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Fontes personalizadas no seu site em HTML

Olá pessoal depois do sumiço eu voltei, há Itacaré hô lugarzim maneiro viu haha mas voltando ao trabalho…

Pessoal hoje vou falar de um assunto muito bacana, digamos que seu cliente utiliza uma fonte padrão e quer aplica-la no site, logo você parte para o flash (ou técnicas complicadas para isso), mas também  ele quer se posicionar no google, o que fazer???

Não se apavore vou mostrar para vocês hoje como utilizar os recursos do Cufó, uma aplicação em javaScript que converte sua fonte para JS e poderá aplica-la a um seletor qualquer, mesmo se ele for dinâmico ou do Banco de Dados, a única restrição é que em alguns navegadores não tem como ser selecionado.

Bom chega de falar e vamos botar a mão na massa! Em primeiro lugar escolha uma fonte que seja free, assim você não corre o risco dos diretos autorais caiem sobre você neste exemplo vou utilizar a fonte Officer Down , baixei ela do site dafont.com, mas fique a vontade de usar qualquer uma desde que seja free hein?!

Depois da fonte baixada vamos ao site do pessoal acesse http://cufon.shoqolate.com em primeiro lugar faça o download do arquivo cufon-yui.js que fará o trabalho sujo para nós, em seguida vamos converter nossa fonte, boms eiu que i site é em Inglês mas vou tentar explicar de forma rápida.

1º – Na primeira etapa Select the font youl´d like to use vocêvai escolher de acordo com a fonte baixada os tipos se ela é regular, bold, itálica regular, bod e itálica, isso vai depender do pacote de fontes neste exemplo só temos a fonte no formato Normal, logo suba apenas a fonte normal.

2º – Incluindo Glyphs, isso na verdade se trata dos caracters de uma fonte isso é muito importante para que nós Brazucas possamos colocar acentuação na fonte marque a opção Basic Latin e Latin-1 Suplement assim ficará leve e com acentos, mas como disse isso depende da sua aplicação da fonte, digamos que não precise de acentos será em um numeral ok?

3º – Em security se a fonte for só sua você a comprou ou a desenvolveu aqui você gera uma garantia que ela será usada pelo seu site, opicional

4º – Aceite os termos (marque opção “The EULAs of these fonts allow Web Embedding”) e seja feliz!

Bom a parte de compreensão e customização é mais técnica não vou aborda-la aqui aconselho a dar uma boa olhada na documentação se isso lhe interessar

Ok agora temos nosso arquivo OfFiCeR_DoWn_500.font.js gerado e pronto para a ação vamos ao HTML

Vamos preparar o terreno, dentro seu body crie a seguinte estrutura, somente para testes ok:

<h1>Lortem Ipsum Dollor</h1>

<div id="menu">
    <span><a href="#">Lorem</a></span>
    <span><a href="#">Ipsum</a></span>
    <span><a href="#">Dollr</a></span>
</div>

Agora o CSS, mais uma vez isso é opcional ok?

body{
    text-align:center;
}
h1{
    font-size:60px;
}
div#menu{
}
    div#menu span{
    padding:10px;
}
div#menu a{
    color:#333;
    font-size:20px;
    text-decoration:none;
}
div#menu a:hover{
color:#FF0000;
}

Agora vamos ao códigos de JS, insira os arquivos baixado e Gerado:

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="OfFiCeR_DoWn_500.font.js"></script>

Agora vamos ao seletor aqui você seleciona qual elemento irá receber a sua fonte:

<script type="text/javascript">
     Cufon.replace('h1');
     Cufon.replace('#menu span');
 </script>

Prontinho! agora poderá utilizar sua fonte personalizada sem muito trabalho e funciona até no Explorer incrível não?!

Além de aplicar a fonte você poderá colocar efeitos de degrade e outros, sugi que leia os exemplos do site ou a docuementação completa em breve irei postar mais sobre o assunto, por hoje é só pessoal!




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (20)

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...