[Tool]Google Web Fonts

Na postagem anterior eu expliquei o uso de uma grande nova ferramenta disponível na CSS3, mas existem outras maneiras de chamar uma fonte sem o visitante tê-la em seu sistema operacional. A outra maneira conhecida como Google Web Fonts, é uma maneira versátil e um tanto quanto interessante.

Vejamos, ambos são funcionais, mas imaginemos, você quer fazer o uso de uma fonte designada pelo designer, mas não a encontra na lista de fontes do Google? Como proceder? Sim, faça uso da maneira anterior, utilizada neste post. Deixando a parte teórica de lado, vamos partir para a parte prática.

Primeiramente, você deverá acessar o site do Google Web Fonts, você pode ter acesso ao mesmo, clicando aqui. Após o primeiro passo, prossiga escolhendo uma fonte na qual você tenha interesse em ser utilizada e clique em "Add to Collection"; note que uma nova barra será inicializada na parte inferior de seu navegador, procure pela opção de "Use".

Você será redirecionado para uma nova página, desça a mesma e procure pela opção na qual você pretende utilizar, @import, css ou por javascript, por início, estarei utilizando a com css; copiem o código e coloque o código do mesmo no mesmo local que você linka seus arquivos css.

Prosseguiremos para o seu arquivo css; chame sua fonte de maneira padrão, ou seja, utilizando o comando font-family, conforme o exemplo abaixo.:

h1 {
 font-family: font-family: 'Skranji', cursive;
}

Mal feito, feito! Apenas chame o seu h1 e pronto, sua fonte será vista por seu visitante sem ao menos tê-la instalada.

Terminando, você chamará a fonte por meio de um link do Google e seu visitante poderá visualizar a fonte normalmente.

Download do código-fonte: Upado no Media Fire
Scan para segurança: Utilizado Virus Total

[CSS]@font-face, novo mecanismo muito útil.

Após um longo tempo sem postar nenhum tipo de conteúdo para os vocês, leitores, trago-lhes uma novidade muito interessante de se fazer uso. Ela foi implementada na última versão de nosso famoso e bom CSS, o CSS3.

Sua função é simples e prática, você quer fazer uso de uma fonte customizada? Sim, aquelas fontes que precisam ser instaladas no sistema operacional de seu visitante, mas não sabe se ele há tem? Então, essa é a função dela, você a chama por meio de um arquivo normal, por tanto, não se esqueça de envia-lo ao seu servidor.

Eu já fiz isso do mesmo, no meu antigo web site, totalmente funcional, por tanto, é indispensável o uso desta nova ferramenta. Mas chega de papo e vamos ao código?

 @font-face { // Aqui chamamos o início da fonte, indicamos que estaremos usando a ferramenta de font-face.
   font-family: 'scarface';  // Aqui indicamos o nome da fonte que você está fazendo uso, no caso desta, é a fonte scarface.
   src: url('scarface-webfont.eot'); // Aqui indicamos que se caso a fonte já esteja instalada no sistema operacional de seu visitante, ele a carregará, ao invés de carregar a que você colocou em seu servidor  
   src: local('scarface'), url('scarface-webfont.ttf') format('truetype'); // Aqui indicamos para que caso o seu visitante não tenha a fonte instalada em seu sistema operacional, a fonte seja carregada de seu servidor até a tela de seu visitante, assim, ele poderá visualiza-la normalmente  
 }  

Download do código-fonte: Upado no Media Fire
Scan para segurança: Utilizado Virus Total

Lembrando que vocês podem e devem compartilhar o conteúdo apresentado nesse post, façam bom uso, e aqui vamos nós!