@font-face trabalhando oom fontes na web

Leave a Comment

Uma boa fonte pode mudar e muito a cara do seu site, mas o problema de se usar fontes customizáveis é que nem sempre temos a garantia de que o usuário que acessa o nosso site terá essas mesmas fontes instaladas no seu computador, vou mostrar como resolver esse pequeno probleminha.

1) Padrão CSS3 @font-face

O padrão para se implementar fontes personalizáveis na web é usando o @font-face do css. Você só precisa de especificar o nome da fonte e o caminho do arquivo de origem da mesma. Quando o usuário acessa o site ele irá fazer o download do arquivo de origem da fonte e aplica-las nos elementos.

1
2
3
4
5
6
7
8

@font-face { 
	font-family: "Nome da fonte"; 
	src: url('font.ttf'); 
}
 
body {
	font-family: "Nome da fonte";
}

Cada navegador suporta formato de fontes diferentes, IEca apenas EOT, firebugado suporta EOT, TTF e OTF o safari apenas TTF e SVG e nosso maravilhoso OPERA suporta TTF, OTF SVG.

Portanto precisaremos de formatos de fontes diferentes para cada tipo de navegador, veja como resolver esse problema:

1
2
3
4
5
6
7
8

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, Opera, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

Se você precisar de exportar sua fonte em outros formatos temos o @font-face Kit Generator assim a fonte irá rodar em todos os navegadores.

A vantagem desse método de aplicação das fontes seria que através dele temos o controle total das fontes visto que estarão em nossos servidores já o contra é que ele é um pouco mais trabalhoso de implementar.

2) Servidores de Fontes

Outra forma de se usar fonte é usando um servidor de fonte como Typekit ou Fontdeck. Nesses casos as fontes são hospedadas em seus servidores e você precisaria de pagar uma taxa de licença de uso, no entanto sua implementação é muito mais simples que o apresentado acima.

1
2

<script type="text/javascript" src="http://use.typekit.com/are7wnq.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

A vantagem é que esse modelo é muito mais fácil de implementar que o apresentado anteriormente porém precisamos de pagar a assinatura dessas fontes e elas ficam hospedadas em servidores de terceiro ou seja se o serviço cair você ficará sem as fontes, dependendo do projeto isso pode se tornar inadmissível.

3) Google Web Fonts

Já havia falado sobre elas em uma outra ocasião, mas ainda sim continua sendo minha forma preferida de implementar fontes personalizáveis. Elas são gratuitas não temos tantas opções quanto as do Typekit ou Fontdeck mas para a maioria dos casos atenderá eu que gosto muito das fontes Ubuntu são uma mão na roda pra mim.

A vantagem é que esse serviço é fácil de usar e além do mais são muito mais rápidas de carregar que as outras opções se está em busca de velocidade então essa é a melhor opção.

1

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

Leave a Reply