7 Fontes grátis para usar como @font-face no seu site

A tipografia de um blog ou site é sem dúvida um dos pontos mais importantes na composição de um bom design. Ter uma bela fonte em projeto pode ser um diferencial e muitos projetos exigem este diferencial. Hoje trarei aos leitores do Escola Sites sensíveis 10 opções para deixar mais bonitos seus sites com o @font-face.

Fugir do velho Arial ou Lucida é muito bom mesmo deixando a página um pouco mais lenta, pois as fontes são carregadas diretamente do  servidor web e não diretamente do computador do leitor, usar fontes diferentes da habitual dará uma elegância para seu projeto, valorizando muito mais o conteúdo de seu site.

O que é o @font-face?

O @font-face é um atributo existente no CSS a partir de sua versão 3, que permite ao web designer incluir fontes que não são as do padrão do sistema operacional. Isso faz com que você consiga usar quase todas as fontes existentes, das mais formais até as mais estilizadas, isso faz abrir um leque incrível de opções.

Como Usar o @font-face?

Para usar o @font-face, apenas inclua a seguinte linha, para declarar:
{code type=css}
@font-face {

font-family: helveticaneue;

src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);

}
{/code}

E faça a atribuição ao elemento que deseja mudar a fonte:
{code type=css}
p {
font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}
{/code}

Depois de uma breve explicação sobre o que é @font-face e como utilizar, vamos as belíssimas fontes para usar em seus projetos:

Hattori Hanzo

[add_link tipo=”download” link=”http://www.fontsquirrel.com/fonts/Hattori-Hanzo”]

Open Sans Condensed

[add_link tipo=”download” link=”http://www.fontsquirrel.com/fonts/open-sans-condensed”]

Ostrich Sans

[add_link tipo=”download” link=”http://www.theleagueofmoveabletype.com/ostrich-sans”]

Mensch

[add_link tipo=”download” link=”http://www.losttype.com/font/?name=mensch”]

Lavanderia

[add_link tipo=”download” link=”http://www.losttype.com/font/?name=lavanderia”]

Franchise

[add_link tipo=”download” link=”http://www.losttype.com/font/?name=franchise”]

FV Almelo

[add_link tipo=”download” link=”http://www.florisvoorveld.com/portfolio/free-font-fv-almelo/”]

E você o que achou do uso do @font-face e das fontes indicadas?

 

Receba as melhores dicas para criar um negócio digital lucrativo

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br