CloudWare

cafelog-coffee

HD GFonts: Mais de 200 Fontes a Sua Disposição!

Quinta, 18 Agosto 2011

Veja como é fácil adicionar novas fontes em seu site utilizando esta extensão e o Google Web Fonts.

joomla

O HD GFonts é um simples plugin que nos permite adicionar um incrível set de fontes que o Google Web Fonts disponibiliza. São cerca de 200 fontes a nossa disposição (incluindo variações de bold, italic e bold-italic) para utilizarmos, como por exemplo: Cantarell, Cardo, Crimson Text, Cuprum, Droid Sans, Droid Sans Mono, Droid Serif, IM Fell Double Pica, Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Neucha, Neuton, Nobile, OFL Sorts Mill Goudy, Old Standard TT, PT Sans, Philosopher, Reenie Beanie, Tangerine, Vollkorn e Yanone Kaffeesatz.

Em meu site utilizo as seguintes fontes: Droid Sans, Expletus Sans, Quattrocento Sans, Terminal Dosis Light e Yanone Kaffeesatz.

Afinal, o que é o Google Web Fonts?

O Google Web Fonts é uma coleção de fonts hospedadas nos servidores do Google e que estão a nossa disposição para usarmos em nossos WebSites gratuitamente. Diferente do CSS font-face (Que irei explicar em uma outra oportunidade) que ainda não é totalmente compatível com todos os Browsers e diferente também da incorporação de Flash nas páginas que são nada amigáveis com os motores de busca, o Google Web Fonts é ideal para aqueles que querem “sair do padrão” e inovar um pouco. Conheça o Google Web Fonts aqui.

Usando o HD GFonts

Após baixar e instalar o HD GFonts vá em Extensions -> Plug-in Manager e selecione Content – HD GFont.

Este plug-in nos oferece a possibilidade de adicionar até 5 fontes, podendo adicionar classes e estilo CSS próprio. Vamos utilizar as seguintes fontes: Amaranth, Arvo, Didact Gothic, Cuprum e Iris Grover com as respectivas classes: gf1, gf2, gf3, gf4 e gf5. Também adicionei as propriedades font-size e line-height em todas elas.

gfonts 1

Agora vamos criar um artigo e inserir o seguinte código nele:

<span class="gf1">AdrielCafé.Comspan>
 
<br />
 
<span class="gf2">AdrielCafé.Comspan>
 
<br />
 
<span class="gf3">AdrielCafé.Comspan>
 
<br />
 
<span class="gf4">AdrielCafé.Comspan>
 
<br />
 
<span class="gf5">AdrielCafé.Comspan>

Salvando e, logo após, exibindo este artigo temos o seguinte resultado:

gfonts 2

Fácil não? Agora basta fazer um tour no Google Web Fonts e mudar a cara do seu site!

O Google Web Fonts pode ser aplicado em qualquer site, seja ele feito usando algum CMS (Como o Joomla!, WordPress, Drupal...) ou linguagem (PHP, C#, Java...). Para que ele funcione basta inserir a tag link , fornecida pelo próprio site, no head da página. Logo irei publicar um artigo mostrando como também é fácil integrar o Google Web Fonts em qualquer site.

Android

Java

Hibernate

Joomla!

CSS3

HTML5

Saia na Frente

html5 css3

Sobre Mim

sobre-foto-2Adriel Café é Web Master e Desenvolvedor Java. Ele incentiva o uso/estudo de Web Standards, Java e Android.

Saiba Mais

Encontre-me

facebook linkedin