TypeFront – Coloque (quase) qualquer fonte em seu website

Post escrito por Yeltsin Lima

Para quem não conhece, existe um serviço recém-criado pelo Google chamado Web Fonts Directory. Com ele, você pode selecionar uma das mais de 15 fontes diferentes e colocar diretamente em seu website, sem precisar baixar nenhum plugin, inserir javascript ou fazer gambiarras para funcionar. Ao contrário, basta inserir dois códigos (ou mais, dependendo da quantidade de fontes desejada). Um exemplo, utilizando a fonte Cantarell:

<link href='http://fonts.googleapis.com/css?family=<strong>Cantarell&subset=latin</strong>' rel='stylesheet' type='text/css'>

Com esse código aí em cima, ele “chama” o estilo da fonte Cantarell simples, ou seja: sem negrito nem itálico. Mas, você também pode inserir os outros modelos. Feito isso, você agora coloca no font-family do CSS, a “chamada” para a fonte Cantarell

<style>h1 { font-family: '<strong>Cantarell</strong>', arial, serif; }</style>

Isso é ótimo mas, possui uma série de limitações: só é possível adicionar as fontes existentes do diretório. Para isso, descobri um maravilhoso site chamado TypeFront, em que você pode fazer o upload das fontes (fique atento aos direitos de uso de cada fonte).

O serviço é gratuito para o envio de até uma fonte e 500 requisições da API por dia. Existem outros planos, bem em conta: PLUS que permite hospedar até 10 fontes e utilizar 5.000 requisições de API por dia (custando US$5/mês), POWER permitindo hospedar ilimitadas fontes e utilizar até 20.000 requisições de API por dia e com um valor de US$15/mês e por último, um plano especial para empresas com um custo orçamentado.

Eles também utilizam o CSS como forma de inclusão das fontes, ou seja, não é necessário poluir o seu código HTML com javascript. Vejam abaixo, um exemplo de código da ferramenta. Lembrando que, o código só funciona no domínio especificado. Ou seja, nem adianta copiar o código e colocar em seu sistema e a inserção no CSS via font-family é exatamente a mesma do Google.

<style>
@font-face {
  font-family: "7Seconds";
  src: url("http://typefront.com/fonts/825588488.eot");
  src: local("☺"),
       url("http://typefront.com/fonts/825588488.woff") format("woff"),
       url("http://typefront.com/fonts/825588488.ttf") format("truetype"),
       url("http://typefront.com/fonts/825588488.svg") format("svg");
}
</style>

Utilizei o plano gratuito para testar o sistema em um website recém desenvolvido. Funcionou de forma ótima, recomendo a sua utilização de todas as formas.

Infelizmente, eles só possuem a forma de pagamento via Cartão de Crédito. Entrei em contato com eles, para perguntar sobre a possibilidade de utilizar o PayPal como forma de pagamento e o desenvolvedor me informou o seguinte: “Quando desenvolvi o TypeFront eu tentei incluir a funcionalidade de inscrição via PayPal mas, a ferramenta aqui na Austrália não possui uma flexibilidade que precisamos. Por exemplo, você não pode fazer o upgrade para outro plano, sem remover o anterior e criar uma nova. Talvez, em breve, quando o PayPal oferecer o Website Payments Pro aqui na Austrália, deixaremos a critério do cliente utilizar o pagamento via Cartão de Crédito ou PayPal.

Fiquei surpreso, vou falar a verdade, com a resposta rápida do desenvolvedor (John Grimes), ou seja, recomendo (em dobro) a utilização do serviço. E para quem não confia utilizar um cartão de crédito internacional, testem a versão gratuita. E sim, vou fazer o pagamento via cartão de crédito.

 TypeFront   Coloque (quase) qualquer fonte em seu website

Artigo por Yeltsin Lima

Curso o primeiro período de Publicidade & Propaganda na Faculdade Integradas Barros Melo (AESO), sou colaborador do Meio Bit e fundador do DicasWP.

0 Comentários

Deixe um comentário

Conecte-se com uma das redes abaixo:

Você pode fazer o Login ou se registrar para ganhar pontos. :-)

300x250yellow4ptpng
'
  • Premium Themes
  • Premium resources for designers

Selo peixe Grande 2011

Junte-se a galera!

Tweets Recentes

Enquete

O que você achou do novo visual?

Ver Resultados

Loading ... Loading ...

Quem tem mais pontos?

  • yeltsinlima (D$41735)
  • guilherme (D$4360)
  • fellipe (D$1925)