Raleway - Fontes Gratuitas

Fontes gratuitas – pare de usar Calibri e Arial

Calibri, Arial, Times New Roman… Há 25 anos, quando o Windows 3.1 era novidade, e todas essas fontes gratuitas inundaram textos e documentos mundo afora, isso representava variedade.

Vínhamos de uma era na qual máquinas de escrever, havia quase 100 anos, digitavam textos sempre no mesmo formato. Computadores imprimiam em uma fonte única também, e mesmo nos ecrãs, não havia qualquer variedade. O mundo era “Courier” e mesmo hoje ainda temos a “Courier New“.

Nesse cenário, a repentina possibilidade de usar 10 ou 12 fontes diferentes parecia maravilhoso. Além da já conhecida Courier, computadores agora ganhavam uma nova lista de fontes de texto que poderiam ser usadas em qualquer ocasião: Arial, Times New Roman, Georgia, Verdana, Tahoma, Impact e tantas mais. Textos chatos agora eram… um pouco menos chatos.

Fontes gratuitas – os primeiros websites

Os primeiros sites a ganhar a internet, ainda antes dos anos 2000, tinham de usar basicamente as mesmas fontes do Windows. Navegadores da época, como o Explorer e o Netscape, não possuíam bom suporte para recursos gráficos ricos. Além disso, o CSS, o HTML e o próprio web design em si engatinhavam.

Empresas que quisessem utilizar fontes diferentes daquelas do Windows em seus sites precisavam fazê-lo em formato de imagem. O que deixava as coisas mais lentas e até mesmo um pouco estranhas e fora de proporção. Felizmente, essa época já passou… mas há quem siga a usar fontes de 20 ou mesmo 30 anos atrás.


Fontes gratuitas – como utilizar?

Para além das fontes-padrão, é necessário que um site carregue as fontes que pretende utilizar. Para fazê-lo, é necessário habilitar a fonte para uso, para que a mesma seja acionada através de instruções CSS contidas nas páginas. Há quatro maneiras básicas de fazê-lo, embora não iremos detalhá-las neste artigo (o faremos em outra ocasião, de cunho mais técnico):

  1. Gerando uma requisição a partir do próprio HTML, na seção <head> da página.
  2. Utilizando a instrução @import, a partir de uma folha de estilo CSS.
  3. Carregando a fonte por meio de propriedades @font-face, também no CSS.
  4. Carregando a fonte por meio de Javascript ou Jquery.

Há mais um par de maneiras de implementar novas fontes, porém não são muito utilizadas. De um modo geral, em um site WordPress ou desenvolvido em outro tipo de CMS, o modo mais simples de diversificar fontes é implementá-las a partir do Google Fonts – uma imensa biblioteca de fontes do Google de livre utilização. As fontes podem ser baixadas ou apenas “renderizadas” no website, como webfonts. Atualmente são mais de 800 as fontes disponibilizadas.

Há outros bancos de fontes gratuitas existentes, os quais veremos a seguir.


Fontes gratuitas – Google Fonts

São 848 fontes e novas delas são sempre adicionadas. Quando seleciona-se uma das fontes, o programa do Google dá inclusive instruções de como deverá incluí-las em seu website, via HTML ou CSS. A simplicidade do Google Fonts tornou a ferramenta quase um padrão entre novos temas e templates para WordPress, Joomla, Magento e outras plataformas. Para quem é adepto de fontes quadradas e fora de moda como Calibri e Arial, eis algumas sugestões encontradas no Google Fonts para substituí-las:


Fontes Gratuitas – Adobe Edge Webfonts

Também gratuita, essa biblioteca de fontes gratuitas tem a assinatura da Adobe. São mais de 500 atualmente e elas também podem ser renderizadas em seu website. Entretanto, para tal, é necessário uma pequena requisição Javascript. Mas não se desespere, basta aceder ao rol de fontes da Adobe e clicar numa delas. Na parte de baixo do ecrã verá instruções claras de como deve implementar.

Fontes Gratuitas - Adobe Edge Fonts


Fontes Gratuitas – Fonts for Web

Outra biblioteca de fontes gratuitas para uso em sites. Esta, em particular, possui um plugin WordPress próprio, o que facilita ainda mais o uso das fontes. Entretanto, para aceder às fontes é preciso fazer um registo no site, embora esse seja gratuito. Preste também atenção – embora a ampla maioria das fontes desse banco sejam de livre uso, há aquelas que não poderão ser utilizadas para fins comerciais.


Fontes Gratuitas – Fontello

Não se trata bem de webfonts, mas este último site merece uma menção por um aspeto peculiar. Ele permite que sejam criadas webfonts para uso em sites com conjunto de ícones. Exato, basta escolher os ícones que formarão a fonte desejada e transferir o resultado. Após isso, basta implementar em seu website por meio de Javascript, plugins ou CSS @font-face (em outra oportunidade ensinaremos tudo isso).

Fontes Gratuitas - Fontello