Atributo Fonte Face

Sempre foi muito fácil identificar Designers gráficos que se aventuravam a desenhar layouts com fontes fantasias fantasiosas, achando que as mesmas fossem aparecer. O computador do usuário não tem como renderizar uma fonte que não está no seu computador certo? Errado! Isso era possível, mas você teria que subir uma fonte no servidor para o usuário baixar quando entrasse no site, isso era bem penoso, além de ser bloqueado pelo navegador, pois era fácil camuflar um vírus (trojan) ali e fazer a festa em cima de seus visitantes. Essa prática nem ficou muito famosa, pois a web ainda estava no começo e não se falava muito ainda em fontes externas.

Sinceramente? Para mim, a fonte externa é mais um dedo do designer em se diferenciar e ou estética do que estratégia propriamente dito. Claro que é a minha opinião e vocês, outros designers, têm total liberdade de não concordarem comigo. O meu ponto é que já existe uma quantidade de fontes de sistema consideráveis para abarcar as principais estratégias visuais como arial, verdana, trebuchet ms, georgia, impact, courier e muitas outras de estilos variados e 100% suportadas. Mas é lógico que fontes externas são muito mais sedutoras, isso é inegável, mas as animações do flash também não são? Pense nisso.

Assim, desenvolvedores e designers “se reuniram” para criarem formas alternativas de recorrer a fontes externas.

sIFR – Scalable Inman Flash Replacement

Sério que em nenhum momento, ninguém parou pra pensar que havia algo errado com essa “técnica”?

Uma técnica que pega o seu texto, esconde e coloca um flash por cima com a fonte diferenciada, isso após carregar um javascript, não pode ser considerado uma solução, “I mean c’mon?!”, está na cara que é uma gambiarra, que infelizmente foi colocada em prática por muitos webdesigners e passou a preencher uma quantidade websites, muitos até de empresas de alto nível.

O pior é que muitas pessoas que usaram (espero que não usem mais) o sIFR, são as mesmas que acham a técnica de “image replacement” deselegantes, vai entender né?
Um ponto que eu acho agressivo no sIFR é você ter que utilizar javascript, flash e css para resolver uma problema inventado pelo designer: utilização de uma fonte externa. Será que o custo x benefício vale tanto assim? Cade o design centrado no desenvolvimento?

Cufón – Fast text replacement with canvas and VML – no Flash or images required.

Já dá um banho em cima do sIFR, mas ainda não convence como solução

Não é a toa que foi rapidamente conhecido com o substituto da técnica anterior sIFR, o Cufón não recorre ao Flash, o que já lhe garante, de cara, bons olhos por parte do desenvolvimento web. Mas então, como ele faz?

O Cufón também recorre ao Javascript, pegando a fonte que você deseja inserir, identificando o texto e trocando por canvas. Por um lado é interessante essa troca, pois é gerado na hora e é mais rápido, além de ser um elemento novo e quase integrado a todos os navegadores ( VAMOS IE, VAMOS!). O problema desta técnica que ainda assim trabalha com uma substituição em massa do texto do site para garantir uma fonte externa, transformando o texto relevante em um elemento não texto, poluindo o HTML com elementos que não dizem nada.

Meu pensamento é simples, se a fonte é um estilo do texto, qualquer forma de manipulá-la deveria estar estritamente dentro do CSS e em nenhum outro lugar, esse é ponto e defesa que me faz usar e recomendar com extrema moderação a técnica de “image replacement”.

Welcome CSS3, we are waiting for you long long time! (Seja bem-vindo CSS3, estamos esperando por ti por um longo longo tempo)

@font-face, o atributo mais bonito da cidade

A parte de webfonts do W3C foi criada em 2002, mas os navegadores ainda estavam muito defasados para suportar tais atributos, ainda mais naquela época que as atualizações eram muito demoradas e o mercado era totalmente dominado pelo Internet Explorer, que não tinha a preocupação de suportar as standards do consórcio.

O font-face é documentado no W3C da seguinte forma:

@font-face {
font-family: Gentium;
src: url(https://example.com/fonts/Gentium.ttf);
}
p { font-family: Gentium, serif; }

Assim, o navegador do usuário baixaria essa fonte e a renderizaria para a visualização do mesmo. Notem, que por medida de segurança, é colocado que caso algo aconteça que impossibilite o usuário de baixar e visualizar a fonte “Gentium”, já estará previsto para o navegador buscar uma fonte semelhante da família “serif”, ou seja, serifada (com pezinhos).

Atualmente, o font-face nos garante 3 formas de se chamar fontes externas dos mais variados tipos, são elas:

Método Typekit

Não sei precisar se foi inventado pelo Typekit, mas sem dúvida foi difundido por ele e por conta disso, copiado por muitas empresas. O ponto positivo é que se apropria do conceito do font-face do CSS3, mas utiliza javascript para fazer o seu CSS poder chamar uma fonte no servidor deles, é como manter as fontes externas nas nuvens, método também utilizado pela segunda forma que será mostrada agora.

Método Google webfonts

A bilionária novamente se mostrou amiga dos desenvolvedores web, lançando o Google webfonts. Um repositório que você tem uma lista de fontes gratuitas para baixar e(ou) utilizar no seu site. Diferente do Typekit, o Google não cobra pela utilização das fontes, além de permitir o font-face do CSS sem a utilização de javascript, exemplo:

Inserir a tag link dentro do HEAD para fazer um css personalizado do Google, esse CSS que fará o font-face para a fonte desejada.
<link href=”https://fonts.googleapis.com/css?family=The+Girl+Next+Door” rel=”stylesheet” type=”text/css”>

Agora é o simples, chamar a fonte diferenciada no css normalmente com o nome indicado pelo Google Web fonts, simples né?

h1 { font-family: 'The Girl Next Door', arial, serif; }
}

Método interno

É a forma recomendada para quem quer uma fonte diferente das que existe no Google, mas deseja fazer o font-face no seu próprio site, sem chamar sites externos. O problema da utilização do font-face é que alguns navegadores não renderizam alguns tipos de extensões de fontes, assim é necessário um hack ou múltiplas declarações para que a técnica seja crossbrowser (funcione em todos os navegadores).

Esse método começou a ganhar mais atenção no meio devido aoartigo do Paul Irish divulgando o Bulletproof @font-face. Hoje em dia, o bloco de código crossbrowser mais indicado é:

@font-face {
font-family: Graublauweb;
src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */
url('Graublauweb.woff') format('woff'), /* Modern Browsers */
url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */
url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
}

Caso você prefira, o Font Squirrel criou um font-face generator, que tal?

Recomendo também um artigo do Smashing Magazine sobre font-face.

Fonte: Bernarddeluna