Início > CSS, Fontes e Tipografia, WEB Design > @font-face – Use a fonte que quiser em seu site

@font-face – Use a fonte que quiser em seu site

A web muda a cada minuto, e você não pode nem deve ficar parado. Todos temos de acompanhar sua evolução, por mais rápida que seja.

Pois em minha modesta opinião, a maior revolução que tivemos em termos de web design nos últimos tempos foi o uso de fontes diferentes das consideradas padrões.

Era terrível depender de verdana, georgia, arial e afins. Por maior que fosse nosso esforço, isso era uma tremenda limitação.

Pois há pouco tempo surgiu a API da Google Fonts para nos possibilitar o uso de fontes excelentes. Depois vieram sites como o Cufon que cria um .js com as coordenadas das letras, possibilitando o uso da fonte escolhida.

Mas agora com o CSS3 e suas revoluções temos a poderosa tag @font-face.

Com ela podemos usar a fonte que bem entendermos apenas utilizando uma referencia.

Note como é simples o seu uso. Primeiramente, usamos a seguinte configuração na tag @font-face para fazer a referencia a fonte escolhida:

@font-face {
    font-family: DeliciousRoman;
    src: url('Delicious-Roman.otf');
}

Depois disso, para utilizar a fonte nos parágrafos por exemplo, é simples assim:

p {
	font:36px DeliciousRoman;
}

Sim, fácil como qualquer outra fonte.

Como eu queria poder recuperar minhas horas de sono pensando em como adaptar uma fonte ruim ao layout. Mas agora, isto é coisa do passado.

Preste atenção na compatibilidade desses malditos browsers que tendem a serem sempre os atrasados na web.  Mas nada que ferramentas excelentes como o FontSquirrel nao resolvam.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Você pode encontrar qualquer conversor online que esse problema é resolvido. Você pode converter suas fonts para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.

Tome certos cuidados na utilização das fontes, pois você está publicando em seu FTP e qualquer um pode fazer o download. Temos zilhões de fontes gratuitas, mas caso esteja utilizando uma fonte paga, pense em outras maneiras de utilizar.

Cada vez mais na web o limite é a imaginação de cada um, pois temos a cada dia um mar de novas possibilidade.

Divirta-se e inspire-se.

Anúncios
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: