Notas sobre webfonts

Um panorama do universo das fontes na web: história, formatos, modelos de negócio.

Gustavo Ferreira

Escrito para Mário Feliciano em outubro de 2011.

Introdução: contexto e terminologia

Web

Uma das condições essenciais para comunicação efetiva é a existência de conceitos e vocabulário comuns entre o remetente e o receptor da mensagem. Por esta razão, padrões ou standards industriais são a camada fundamental de qualquer sistema de informação.

A Internet é uma rede global de redes de computadores que usam o padrão TCP/IP para comunicar entre si.

A World Wide Web é uma rede de documentos de hipertexto interconectados, criados de acordo com os padrões HTML (uma sintaxe para estruturação de conteúdo) e CSS (uma sintaxe para controle da exibição de documentos HTML). Esse documentos são transferidos pela rede através do protocolo HTTP. Cada documento na web é identificado através de um endereço único chamado URL.

Um browser é um aplicativo para acesso, visualização e interação com documentos na web. Os principais browsers em uso hoje em dia são Internet Explorer (Microsoft), Firefox (Mozilla), Chrome (Google), Safari (Apple) e Opera.

Web fonts

O termo web fonts é usado genericamente para se referir ao uso de fontes externas em documentos de HTML formatados com folhas-de-estilo CSS.

Web fonts são um recurso relativamente recente. Quando o formato HTML foi criado, não havia um mecanismo para escolha de fontes – os documentos eram simplesmente exibidos com a fonte padrão disponível no sistema do usuário, de acordo com as preferências de cada browser e/ou sistema operacional.

A primeira tentativa de adicionar seleção de fontes à web foi através da tag de HTML <font>, que permitia a utilização de qualquer fonte instalada localmente na máquina do usuário em uma página da web. Isso aconteceu em um período de grande competição em torno do padrão HTML, com os principais fabricantes de browsers da época – Microsoft e Netscape – acrescentando novas tags e funções unilateralmente. A tag <font> não é mais usada hoje, pois vai contra o princípio de separação entre conteúdo (HTML) e formatação (CSS), considerado boa prática na produção de páginas para a web.

Posteriomente, com a adição das folhas-de-estilo CSS ao conjunto de tecnologias padrão para publicação de conteúdo na web (web standards), passou-se a utilizar o atributo font-family para atingir o mesmo objetivo. Mas a limitação de poder usar apenas as fontes disponíveis na máquina do usuário permanecia.

O próximo passo evolutivo foi a adição de uma tag adicional – @font-face – ao padrão CSS, para permitir que arquivos de fontes externos pudessem ser importados ao documento e usados para exibir conteúdo. Com esse mecanismo, fontes que não estavam disponíveis na máquina do usuário poderiam finalmente ser usadas na exibição da página. Mas faltava ainda uma definição quanto ao formato(s) desse(s) arquivo(s) de fonte.

‘Web font linking’ versus ‘font-embedding’

Fontes usadas na web por intermédio da tag @font-face não são incluídas (embedded) no documento, mas sim importadas ou “linkadas“ a partir da folha de estilos CSS – da mesma forma como outros tipos de mídia digital como imagens, arquivos de som/vídeo etc.

Essa distinção é importante, pois os métodos de licenciamento de fontes para uso na web (via font linking) e para uso em software/hardware (via font embedding) costumam ser diferentes.

A terminologia em inglês nesta área não é sempre clara. Por exemplo, o formato EOT significa Embedded OpenType, mas web fonts neste formato não são incluídas (embedded) no documento, e sim referenciadas (linked) a partir de folhas-de-estilos.

Embedded fonts portanto são fontes embutidas no produto final, que pode ser apenas software ou software+hardware. Fontes em e-books, por exemplo, são incluídas com o equipamento de leitura ou com o documento; o mesmo se aplica a fontes usadas em interfaces de diversos tipos de aparelhos, painéis digitais de informação etc.

Web fonts, por sua vez, são fontes usadas em páginas de HTML através do recurso @font-face do padrão CSS, que torna as fontes acessíveis ao documento através de um mecanismo de referência (e não por inclusão). Web fonts moram na rede e são distribuídas de forma centralizada. Os usuários (leitores ou “visitantes” de páginas na web) não possuem uma cópia local da fonte em suas máquinas; todos acessam o mesmo arquivo de um servidor remoto.

Os primórdios das web fonts

Formatos não-padronizados

Como vimos, apesar da existência do mecanismo @font-face na especificação do CSS, até recentemente não havia um padrão quanto ao formato de arquivos de fontes na web. Como resultado, alguns browsers implementaram formatos diferentes e incompatíveis entre si.

O Internet Explorer foi o primeiro browser a oferecer suporte para web fonts, no formato EOT desenvolvido pela própria Microsoft. O Netscape Navigator acrescentou suporte a web fonts usando um outro formato, TrueDoc, desenvolvido pela BitStream. Por fim o W3C – organização internacional que define os padrões para a internet – desenvolveu um formato de fontes livre/aberto, baseado em XML e parte da especificação do padrão de gráficos vetoriais SVG – as fontes SVG.

Com soluções diferentes e incompatíveis entre si, o universo das web fonts ficou fragmentado, e nenhum formato ganhou tração suficiente para se transfornar em um padrão de fato. O formato EOT encontrou algum uso em países do sul da Ásia, como solução para a falta de suporte no sistema operacional Windows a sistemas de escrita silábicos complexos como Malayalam ou Telugu; mas não obteve o mesmo sucesso entre os usuários do alfabeto latino.

Já o Netscape, em resposta à competição desleal da Microsoft, optou por transformar o código do Navigator em software livre, criando a fundação Mozilla para administrar o código-fonte e intermediar o processo de desenvolvimento de novas versões do browser – que passou a ser chamar Firefox. Nesse processo o suporte ao formato de fontes TrueDoc foi abandonado, uma vez que se tratava de uma tecnologia proprietária da Bitstream, incompatível com as licenças e modelo de distribuição de software livre.

O formato de fontes SVG, por sua vez, ficou restrito ao universo dos documentos SVG, sem se tornar um padrão dominante na web diante da competição com os formatos PDF e Flash, com características semelhantes (ambos da Adobe).

Gambiarras e soluções provisórias

A falta de um formato de fontes padrão para a web e a necessidade prática de usar na web fontes diferentes das de sistema levaram ao surgimento de diversos “hacks” e soluções mirabolantes para contornar o problema. Parte dessas soluções (sIFR, Cufón) fazia uso da tecnologia Flash, da Adobe – disponível como plugin na grande maioria dos browsers, e capaz de incluir fontes –, para substituir trechos de texto do documento HTML por fontes especiais. Outras opções (como Facelift) faziam uso de arquivos de imagens comuns, gerados através de um script no servidor; ou geravam o texto com JavaScript na máquina do usuário (Typeface.js), usando o elemento de HTML <canvas> com fontes SVG (Firefox, Safari e Opera) ou a tecnologia VML (Internet Explorer), de acordo com o browser.

Nenhuma dessas soluções era robusta o suficiente para permitir o uso de fontes em blocos extensos de texto – funcionavam apenas em frases curtas, em tamanhos de título. Mesmo assim, essas soluções passaram a se tornar cada vez mais populares entre web designers, revelando ao mesmo tempo uma demanda real por fontes, e uma necessidade de definir um padrão aberto integrado aos padrões HTML/CSS existentes.

Suporte para fontes OpenType “nuas”

O panorama começou a mudar rapidamente a partir de 2007, com Safari, Opera e Firefox introduzindo suporte para fontes OpenType comuns – sem qualquer mecanismo de proteção ou bloqueio de acesso para usuários não licenciados. Isso gerou protestos da parte de designers de tipos e fundições tipográficas, já que esse tipo de uso violava as licenças de fontes comerciais.

Ao ‘linkar’ uma fonte OpenType através da tag de CSS @font-face a uma página da internet, qualquer visitante se tornaria capaz de acessar e copiar o arquivo – ou seja, o uso de fontes comerciais na web era equivalente a redistribuição das fontes, o que não é permitido pela grande maioria das licenças de uso de fontes comerciais. Na prática, isso limitava o uso de fontes na web a fontes livres, distribuídas sob licenças permissivas de software livre como GPL, OFL, CreativeCommons etc.

Surgem os serviços de web fonts

O suporte de web fonts sem proteção por parte dos browsers foi visto como uma ameaça por alguns, e como oportunidade de negócios por outros. Para tornar o uso de fontes comerciais na web possível foi desenvolvido o conceito de serviços de hospedagem segura de web fonts. O primeiro a ser anunciado foi o TypeKit, fundado por ex-funcionários do Google; seguido por outros como FontDeck, FontSpring, WebInk etc.

O modelo de negócios desses serviços consiste em desenvolver tecnologia para servir fontes na web, e atuar como distribuidor ou intermediário entre as fundições e os usuários finais: hospedando as suas fontes de forma segura, vendendo acesso aos usuários, e repassando uma parcela do pagamento para as fundições.

Entre as fundições, poucas foram capazes de se antecipar aos acontecimentos e desenvolver um sistema próprio para servir fontes na web de forma independente. A Typotheque foi a primeira a oferecer um serviço de web fonts próprio, lançado antes mesmo do TypeKit. Além da Typotheque, apenas o FontBureau e a Just Another Foundry (do designer Tim Ahrens) possuem serviço de web fonts próprio.

A natureza centralizada dos serviços de web fonts criou uma oportunidade para revisar e reinventar o modelo de negócios por trás da distribuição de fontes. Como as fontes são acessadas a partir de um servidor remoto, o usuário/cliente recebe não um arquivo de fonte para download, mas sim um código de acesso personalizado. Isso torna possível um modelo de negócios alternativo de aluguel de fontes, no qual o usuário paga uma pequena taxa mensal ou anual para acessar os arquivos de fontes remotamente – da mesma forma como outros serviços online como aluguel de servidor ou nomes de domínio etc. Esse modelo tem se mostrado mais acessível para web designers, pois reduz o custo inicial da licença, e se encaixa bem no seu modo normal de trabalho e cobrança.

Apesar desses desenvolvimentos, muitas fundições permaneceram hesitantes diante da incerteza da situação, sem desenvolver um sistema próprio ou montar parceria com serviços de web fonts, esperando a poeira assentar.

O processo de padronização das web fonts

O grupo de trabalho de web fonts no W3C

Por conta da objeção das fundições ao suporte a fontes OpenType ‘nuas’ (desprotegidas) na web, e em busca de um consenso entre fabricantes de browsers, designers de tipos/fundições tipográficas e web designers, foi criado um grupo de trabalho no W3C para discutir a situação e criar um formato padrão para uso de fontes na web.

O grupo de trabalho em web fonts do W3C ainda está ativo. Ele é formado por representes de fabricantes de browsers e outras grandes empresas de tecnologia (Microsoft, Google, Apple, Mozilla, Opera, Adobe, Monotype), e alguns experts convidados como representantes dos designers de tipos/fundições tipográficas: Tal Leming (Type Supply), Erik van Blokland (LettError) e John Hudson (Tiro Typeworks), além de Adam Twardoch (FontLab).

EOT Lite, proposta rejeitada

A Microsoft inicialmente ‘abriu’ o seu formato EOT, e o ofereceu para ser padronizado pelo W3C livre de patentes. Contudo houve rejeição, por parte de representantes de outros browsers, ao mecanismo de proteção de cópias que registrava a URL do site no qual a fonte seria usada no próprio arquivo da fonte. Esse mecanismo de segurança foi considerado um sistema de DRM, conceito que é incompatível com as tecnologias abertas/livres que o W3C promove e com a licença de browsers como Firefox, Chrome e Opera.

Diante do impasse foi sugerido portanto remover do formato EOT os pontos de contenção, em uma proposta que foi batizada na época de EOT Lite. Mas mesmo assim restaram outras objeções, por exemplo em relação ao sistema de compressão MTX, uma tecnologia desenvolvida pela Monotype e usada no formato EOT.

Consenso em torno de um novo formato: WOFF

Desta discussão em torno do formato EOT nasceu a contra-proposta de um novo formato de fontes para a web, desenvolvido por Jonathan Kew (Mozilla) e Tal Leming, e batizado de WOFF – Web Open Font Format. Este formato foi extensivamente discutido, aperfeiçoado e testado, até ser finalmente aceito como o padrão a ser seguido. Hoje todas as últimas versões dos principais browsers já suportam web fonts no formato WOFF, e existem ferramentas livres para gerar arquivos de fontes neste formato. O trabalho do grupo trabalho do W3C encontra-se hoje em estágio final de documentação, padronização e divulgação de resultados.

Vale observar que o formato WOFF não é exatamente um novo formato, e sim uma espécie de envelope de meta-dados em formato XML – nome e URL da fundição, nome do designer, breve descrição do tipo, link para uma página com o texto completo da licença de uso etc. – em torno de uma fonte OpenType comum, compactada com o algoritmo de compressão ZIP.

Hoje temos portanto no formato WOFF um padrão relativamente seguro para uso de fontes na web, suportado pelos principais browsers. Mas como tudo isso ainda é muito recente, e nem todos os usuários fazem updates de browsers, uma parcela significativa de usuários da web ainda estão usando browsers sem suporte ao formato WOFF. Os usuários do Internet Explorer são especialmente lentos em termos de upgrade. Por causa dessa situação, na prática ainda é necessário servir fontes em outros formatos para atender a todos os usuários adequadamente.

Geração de arquivos de fontes para a web

Geração de webfonts

Por causa de diferenças em tecnologia e forma de uso, fontes para web são diferentes de fontes comuns usadas no desktop. O formato OpenType é suportado pela maioria dos browsers, mas para melhor desempenho e segurança é necessário processar as fontes OpenType comuns/completas usadas no desktop antes de usá-las na web. Além disso, também é necessário gerar fontes em outros formatos (WOFF, EOT, SVG) para atender a todos os browsers e tipos de dispositivos.

A seguir vai uma breve descrição de procedimentos comuns na hora de gerar web fonts:

Subsetting

Subsetting consiste em reduzir o conjunto de caracteres de uma fonte para tornar os arquivos menores e mais leves, para que sejam transmitidos mais rapidamente pela rede, e para evitar tornar a versão completa da fonte disponível na rede.

Muitas fontes OpenType modernas possuem conjuntos de caracteres extensos, cobrindo diversas línguas, features OpenType, caracteres especiais etc. Antes de gerar fontes para a web é importante analizar o documento no qual as fontes serão usadas: qual(is) a(s) língua(s) usada(s) no documento, qual o tipo de numerais (minúsculos/maiúsculos, proporcionais/tabulares) etc. A partir desta análise faz-se então uma seleção contendo apenas os glifos necessários para exibir esse conteúdo específico.

O suporte a OpenType features em browsers ainda é muito limitado – o Firefox é o mais avançado neste sentido, mas mesmo assim suporta apenas uma parcela reduzida de features –, portanto é necessário separar variações de números, small caps, símbolos etc em fontes diferentes, como se fazia antigamente com fontes no formato PostScript.

Obfuscação da tabela de nomes

Web fonts usadas através da tag @font-face não fazem uso da tabela de nomes contida em fontes OpenType; ao invés disso, o nome da família é redefinido manualmente no código CSS da página.

Essa característica técnica abre espaço para uma medida de segurança adicional, que visa impedir que web fonts possam ser instaladas no sistema operacional caso o usuário consiga capturar o arquivo: a remoção dos dados da tabela de nomes da fonte. Desta forma a fonte funciona apenas no browser.

Diferentes arquivos de web fonts para diferentes browsers

O formato WOFF é o formato padrão para o futuro e o presente das web fonts, mas hoje ainda é necessário lidar com browsers e sistemas do passado, que não suportam WOFFs. Para suportar todos os browsers, é necessário gerar e servir os seguintes formatos:

WOFF para versões modernas de todos os browsers
OTF/TTF para versões antigas de todos os browsers, exceto Internet Explorer
EOT para versões antigas do Internet Explorer
SVG para o Safari Mobile (iPad e iPhone)

Esses diferentes formatos são especificados de uma só vez no CSS, em ordem, de forma a fazer com que cada browser carregue apenas o formato correto.

Geração de web fonts

As diferentes etapas do processo de geração de web fonts – subsetting, geração de diferentes formatos de fontes, geração do código @font-face, – podem ser automatizadas com o uso de ferramentas especiais, a mais conhecida sendo o serviço gratuito @font-face Generator do site FontSquirrel.

Serviços de hospedagem de fontes costumam usar ferramentas próprias que adicionam algumas etapas à lista acima, como especificação do domínio onde as fontes serão usadas (para evitar hotlinking, ou uso não autorizado das fontes por outros sites), nome/número do projeto, etc.

Usando web fonts com a tag @font-face

A tag @font-face é o mecanismo pelo qual fontes externas são “importadas” para uso em folhas de estilo CSS e aplicadas a documentos.

Em sua versão mais simples, a sintaxe da tag @font-face possui dois atributos, font-family (o nome da família, que pode ser diferente do nome original na tabela de nomes da fonte) e src (o caminho para o arquivo de fonte no servidor): 

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont.woff') format('woff');
}

Sintaxe @font-face “infalível”

Como vimos anterioRmente, na prática, para atender a todos os browsers/dispositivos ainda é necessário especificar outros formatos de fontes.

A sintaxe recomendada para isso, elaborada inicialmente por Paul Irish e aprimorada coletivamente ao longo de muitos testes, é conhecida como bulletproof @font-face syntax: 

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont.eot?#iefix') format('embedded-opentype'), 
        url('myfont.woff') format('woff'), 
        url('myfont.ttf') format('truetype'),
        url('myfont.svg#svgFontName') format('svg');
}

Style-linking

Um possível passo adicional é a associação de diferentes fontes em uma família com as variações Regular, Italic, Bold e Bold Italic. Dessa forma, basta aplicar o elemento de HTML <strong> ou <b> para ativar automaticamente a troca da fonte no texto. 

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont.eot?#iefix') format('embedded-opentype'), 
        url('myfont.woff') format('woff'), 
        url('myfont.ttf') format('truetype'),
        url('myfont.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily';
    font-style: italic;
    src: url('myfont-italic.eot?#iefix') format('embedded-opentype'), 
        url('myfont-italic.woff') format('woff'), 
        url('myfont-italic.ttf') format('truetype'),
        url('myfont-italic.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily';
    font-weight: bold;
    src: url('myfont-bold.eot?#iefix') format('embedded-opentype'), 
        url('myfont-bold.woff') format('woff'), 
        url('myfont-bold.ttf') format('truetype'),
        url('myfont-bold.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily';
    font-style: italic;
    font-weight: bold;
    src: url('myfont-bold-italic.eot?#iefix') format('embedded-opentype'), 
        url('myfont-bold-italic.woff') format('woff'), 
        url('myfont-bold-italic.ttf') format('truetype'),
        url('myfont-bold-italic.svg#svgFontName') format('svg');
}

Infelizmente essa sintaxe ainda não é suportada corretamente por todos os browsers: Internet Explorer e Opera apresentam bugs na exibição de itálicos.

A alternativa é definir cada estilo separadamente, e associar os estilos explicitamente no CSS – conforme o exemplo abaixo: 

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont.eot?#iefix') format('embedded-opentype'), 
        url('myfont.woff') format('woff'), 
        url('myfont.ttf') format('truetype'),
        url('myfont.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily Italic';
    src: url('myfont-italic.eot?#iefix') format('embedded-opentype'), 
        url('myfont-italic.woff') format('woff'), 
        url('myfont-italic.ttf') format('truetype'),
        url('myfont-italic.svg#svgFontName') format('svg');
}

p { font-family: "MyFontFamily"; }
p em { font-family: "MyFontFamily Italic"; font-style: normal; }

Variações de peso

A tag @font-face também permite especificar séries de pesos e larguras.

Pesos podem ser especificados numericamente, com valores entre 100 e 900 (o valor recomendado para a Regular é 400). É aconselhável trabalhar com intervalos de 100, portanto podem ser usados 9 pesos: 100, 200, 300, 400, 500, 600, 700, 800, 900.

O exemplo abaixo usa valores numéricos para especificar uma série de 4 pesos. Repare como os pesos são expressos numericamente no atributo font-weight, mas o nome das fontes é definido arbitrariamente no atributo font-family, usando uma terminologia mais familiar de nomes de pesos como Light, Bold, Black etc.

@font-face {
    font-family: 'MyFontFamily Light';
    font-weight: 200;
    src: url('myfont-light.eot?#iefix') format('embedded-opentype'), 
        url('myfont-light.woff') format('woff'), 
        url('myfont-light.ttf') format('truetype'),
        url('myfont-light.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily Regular';
    font-weight: 400;
    src: url('myfont-regular.eot?#iefix') format('embedded-opentype'), 
        url('myfont-regular.woff') format('woff'), 
        url('myfont-regular.ttf') format('truetype'),
        url('myfont-regular.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily Bold';
    font-weight: 600;
    src: url('myfont-bold.eot?#iefix') format('embedded-opentype'), 
        url('myfont-bold.woff') format('woff'), 
        url('myfont-bold.ttf') format('truetype'),
        url('myfont-bold.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily Black';
    font-weight: 800;
    src: url('myfont-black.eot?#iefix') format('embedded-opentype'), 
        url('myfont-black.woff') format('woff'), 
        url('myfont-black.ttf') format('truetype'),
        url('myfont-black.svg#svgFontName') format('svg');
}

Variações de largura

De forma análoga, também é possível especificar diferentes larguras através do atributo font-stretch:

@font-face {
    font-family: 'MyFontFamily Compressed';
    font-stretch: compressed;
    src: url('myfont-compressed?#iefix') format('embedded-opentype'), 
        url('myfont-compressed.woff') format('woff'), 
        url('myfont-compressed.ttf') format('truetype'),
        url('myfont-compressed.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily Condensed';
    font-stretch: condensed;
    src: url('myfont-condensed?#iefix') format('embedded-opentype'), 
        url('myfont-condensed.woff') format('woff'), 
        url('myfont-condensed.ttf') format('truetype'),
        url('myfont-condensed.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily Normal';
    font-stretch: normal;
    src: url('myfont-normal?#iefix') format('embedded-opentype'), 
        url('myfont-normal.woff') format('woff'), 
        url('myfont-normal.ttf') format('truetype'),
        url('myfont-normal.svg#svgFontName') format('svg');
}

@font-face {
    font-family: 'MyFontFamily Extended';
    font-stretch: expanded;
    src: url('myfont-expanded?#iefix') format('embedded-opentype'), 
        url('myfont-expanded.woff') format('woff'), 
        url('myfont-expanded.ttf') format('truetype'),
        url('myfont-expanded.svg#svgFontName') format('svg');
}

Métodos de proteção dos arquivos de fonte

O mecanismo de web fonts definido pelo W3C e implementado pelos browsers não contém um sistema de controle de acesso, deixando os arquivos de fontes expostos a qualquer visitante de um site.

Sistemas de controle de acesso (DRM) foram rejeitados durante as discussões do grupo de trabalho do W3C por serem considerados ineficientes, caros, hostis aos usuários que realmente pagam pelos produtos, e incompatíveis com sistemas disponíveis sob licenças de software livre.

A ênfase no projeto do formato WOFF foi em tornar informação sobre as fontes facilmente visível para o visitante do site, através de uma interface direta com o browser. Fontes no formato WOFF não podem ser instaladas diretamente em nenhum sistema operacional – o que também serve para conter uso não-autorizado. Mesmo havendo ferramentas para converter fontes WOFF de volta ao formato OpenType, é mais barato em termos de tempo simplesmente comprar a licença de uso pra web da fundição.

Diante desta arquitetura aberta do mecanismo de web fonts, cabe a cada fundição/designer desenvolver e manter mecanismos próprios para proteger e controlar o acesso a suas fontes.

A estratégia de “defesa em profundidade”

A estratégia adotada pelos serviços de web fonts comerciais é a de “defesa em profundidade” – uma série de pequenas barreiras e empecilhos que, sozinhos, não seriam capazes de deter usuários mal-intencionados, mas que em conjunto tem seus efeitos somados e acabam sendo eficazes para desencorajar ataques.

Além do formato WOFF, alguns passos da otimização dos arquivos de fontes para a web também funcionam como medidas de proteção: as web fonts individuais contém apenas uma pequena parcela dos glifos da fonte OpenType completa, e possuem uma tabela de nomes vazia – funcionam perfeitamente como web fonts, mas não podem ser instaladas no sistema operacional.

Além dessas etapas de processamento dos arquivos de fontes, também é possível bloquear o acesso aos arquivos. Para isso existem dois métodos:

Scripts em PHP

É possível regular o acesso às fontes por intermédio de um pequeno script em PHP que cria uma chave única para cada sessão, usando a senha individual do usuário. O arquivo de fonte só pode ser acessado mediante essa senha e código da sessão, que são únicas para cada usuário.

Existem diferentes variações deste tipo de script. Fundições comerciais desenvolveram suas própris versões proprietárias, mas há também soluções livres e gratuitas como SPiFY, ou Simple PHP Font securitY.

HTTP Referer

A outra alternativa é bloquear o acesso aos arquivos de fontes através de ajustes no parâmetro HTTP Referer do arquivo de configuração .htaccess. Este método verifica de qual domínio está partindo a requisição da fonte, e serve as fontes apenas se o domínio em questão constar de uma lista de domínios autorizados elaborada previamente.

A regra para proteger os arquivos de fonte pode variar de acordo com as preferências do web-designer ou do servidor. Por exemplo, pode-se optar por bloquear todos os arquivos de fonte (ou seja, todos os arquivos de extensão otf, woff e eot disponíveis no servidor), ou pode-se criar uma pasta específica apenas para fontes, e bloquear todo o conteúdo desta pasta. Eu prefiro o segundo método, por achar mais simples e fácil de implementar.

Fundições comerciais costumam oferecer este tipo de script para clientes que desejam hospedar as fontes por conta própria. Mas, assim como no caso dos scripts em PHP, também há alguns exemplos de scripts disponíveis gratuitamente na web.

Juntando todas as peças

Na prática, os dois métodos de controle de acesso mencionados acima podem ser usados juntos. Somados à redução do conjunto de caracteres (subsetting), a manipulação da tabela de nomes e ao formato WOFF, chega-se a um sistema suficientemente seguro, capaz de deter a prática de cópias não-autorizadas em larga escala.

Estratégias para comercialização de web fonts

Para oferecer suas fontes para uso na web, uma fundição tipográfica ou designer de tipos independente possui hoje algumas opções:

Parcerias com serviços de web fonts

A solução mais fácil e rápida para oferecer fontes na web comercialmente é montar uma parceria com um dos serviços de web fonts existentes hoje – como TypeKit, FontDeck, WebInk, FontSpring etc. Essas empresas cuidam da hospedagem das fontes, da comercialização de licenças, do suporte ao usuário final, e muitas vezes mesmo da otimização das fontes pra mídia tela.

A grande vantagem deste modelo é que o designer/fundição não tem grandes custos iniciais, e não precisa se preocupar com questões técnicas – apenas fornece as fontes OpenType mestras, e a equipe do serviço de web fonts cuida do resto.

Mas há também desvantagens: as fontes acabam fazendo parte de um grande catálogo com fontes de diversas outras fundições, muitas vezes de qualidade questionável. O designer/fundição fica à mercê da apresentação e do marketing do serviço de web fonts. Perde-se em termos de exclusividade, e isso acaba se refletindo na imagem da fundição como um todo.

Outro problema é a diferença na mentalidade entre os profissionais por trás de serviços de hospedagem de fontes (em grande parte programadores e web-designers) e designers de tipos. Há diferenças fundamentais na cultura e nos métodos de trabalho de cada profissão, e neste arranjo o designer de tipos fica em posição desfavorável.

Na medida em que o mercado de web fonts cresce e se torna gradativamente mais rentável, eu não considero esta uma boa opção a longo prazo.

Permitir que clientes hospedem as fontes

Outra alternativa de complexidade relativamente baixa é a extensão da licença de uso padrão para permitir que o usuário hospede as fontes em seu próprio servidor. Neste modelo a responsabilidade de implementação e manutenção da hospedagem segura das fontes fica com o usuário, e não com a fundição. A responsabilidade da fundição passa a ser fornecer as instruções e documentação técnica necessária para os clientes, e ser capaz de responder perguntas e resolver problemas quando necessário (troubleshooting).

Uma possível desvantagem deste modelo é a dificuldade de controlar se a implementação efetivada pelo cliente se mantém fiel às especificações.

Desenvolver um serviço de web fonts próprio

Dentre as muitas fundições tipográficas digitais em operação hoje, poucas investiram no desenvolvimento de um serviço de web fonts próprio – que eu saiba apenas a Typotheque, a Just Another Foundry e o FontBureau (o último criou uma empresa à parte chamada WebType). Outras como a Hoefler & Frere-Jones estão para lançar os seus serviços em breve.

Como as fontes são servidas dinamicamente, a fundição/distribuidor precisa assegurar uma conexão estável e rápida às fontes. Uma eventual interrupção no serviço pode ter consequências sérias para clientes que usam web fonts dinamicamente — o seu site aparecerá desfigurado, exibindo uma fonte padrão de sistema ao invés das fontes especiais. No caso de sites de grandes marcas, isso pode afetar a imagem e a credibilidade da empresa.

Em busca de maior segurança, velocidade e estabilidade, alguns sistemas de web fonts utilizam o serviço de “servidor em nuvem” (cloud server) da Amazon. Desta forma, se houver um problema em um dos servidores, há toda uma rede de servidores capaz de automaticamente compensar a falha.

Montar um serviço de web fonts próprio representa um intestimento considerável de tempo e recursos. A tecnologia de web fonts ainda se encontra em constante desenvolvimento, com os detalhes da implementação técnica mudando em ritmo acelerado. Aqueles que decidem montar o próprio serviço de web fonts precisam ter aptidão e conhecimento para lidar com tecnologia e sistemas para a web.

A vantagem deste modelo é ter controle total sobre o sistema, e poder acumular know-how nesta área desde já. A desvantagem é o custo e a mão-de-obra envolvidas, sem que haja um retorno a curto prazo.

Licenciamento de tecnologia e know-how

Ao invés de desenvolver todo um sistema de web fonts do zero, também é possível licenciar tecnologia e ferramentas de quem já passou pelo processo e desenvolveu todas as peças necessárias para o sistema funcionar.

A Typotheque, por exemplo, licencia o seu sistema de web fonts através do site Type Applications – o serviço de web fonts da Typonine (fundição do designer croata Nikola Djurek) utiliza as mesmas técnicas e ferramentas que o sistema de web fonts da Typotheque. A vantagem de usar essas ferramentas é poder contar com a experiência acumulada pela Typotheque ao longo de mais de dois anos de operação de um serviço próprio.

É possível que outros operadores de serviços de web fonts também tenham interesse em licenciar tecnologia e know-how para outras fundições, mesmo sem ter anunciado isso publicamente. O sistema de web fonts da Just Another Foundry me parece ser bastante interessante, por ser mais simples que os outros.

Modelos de negócio e licenças de uso

Do ponto-de-vista do usuário de web fonts, existem essencialmente dois tipos de uso: serviços de web fonts, ou fontes hospedadas no próprio servidor — cada um com um tipo de licença e modelo de negócios.

Licenças de web fonts

Como vimos acima, neste modelo as fontes ficam hospedadas em um servidor controlado pela fundição (ou por um distribuidor intermediário), e são ‘importadas’ pelos clientes através de uma chave de acesso individual.

Licenças de web fonts pode ser vendidas como uma licença separada, ou podem ser incluídas na licença básica da fundição. Ao comprar uma licença de web font através da sua conta no site da fundição, o usuário ganha acesso a um painel de controle onde é possível criar projetos de web fonts.

Cada projeto de web fonts permite configurar uma série de opções, como por exemplo:

  • quais as fontes individuais contidas no projeto
  • style-linking entre fontes
  • línguas e OpenType features (para os subsets)
  • URL do(s) site(s) onde as fontes vão ser usadas

Ao término do processo de configuração, o sistema gera uma chave de acesso para a folha-de-estilos com as fontes, e um trecho de código CSS para ser inserido na página de HTML – tudo acompanhado de instruções detalhadas. O painel de controle do usário também oferece estatísticas para acompanhar o volume de acesso às fontes, e antecipar eventuais custos com aluguel de largura de banda extra.

Licenças de teste gratuitas

Como os sistemas de serviço de web fonts operam em larga escala e são todos automatizados, é fácil para as fundições e distribudores oferecer licenças de teste gratuitas por um curto período. Isso permite que o cliente faça uso do sistema de web fonts com todas as suas funcionalidades, podendo testar as fontes no próprio site antes de efetuar a compra da licença.

Cobrança por largura de banda extra

A licenças comerciais de web fonts costumam vir associadas a um limite mensal de largura de banda, que pode variar de acordo com o tamanho do site do cliente. Quanto maior o site, mais largura de banda necessária para servir as fontes, e maior o custo para o cliente.

No caso de sites muito grandes, para evitar custos recorrentes com largura de banda extra, é aconselhável que o cliente hospede as fontes no próprio servidor. Isso requer uma licença especial (vide abaixo).

Licenças especiais para hospedagem própria

A licença para hospedagem no próprio servidor é uma alternativa interessante para sites com grande volume de tráfego.

O custo dessa licença é consideravelmente mais alto do que o da licença de web font comum, hospedada no servidor da fundição/distribuidor. Neste modelo o cliente recebe um pacote contendo os diferentes arquivos de fontes para diferentes browsers, gerados sob medida para o seu site, além de instruções completas para implementação de medidas de segurança no seu servidor.

Conclusão

O melhor tipo de serviço de fontes e o melhor modelo de negócios para uma fundição dependem de uma série de fatores, como o tamanho do catálogo de fontes, a relevância da mídia tela/web para este catálogo, orçamento disponível, prazo, nível de conhecimento técnico, estratégia de negócios, posicionamento etc.

O modelo de licenciamento mais adequado para o cliente depende principalmente dos fatores tamanho do site e orçamento. Para pequenos sites os serviços de web fonts oferecem o melhor custo-benefício, com custo baixo e gradual. Grandes clientes custumam preferir hospedar as fontes por conta própria, para ter maior controle sobre a performance do site.

O terreno continua mudando rapidamente, e muitas mudanças ainda estão para acontecer. A tendência é que a internet e a mídia tela, e consequentemente o mercado de web fonts, se tornem cada vez mais relevantes, até finalmente suplantarem a mídia impressa como principal fonte de renda dos designers de tipos e fundições. Aqueles que mergulham cedo no admirável mundo novo das web fonts se tornam capazes de se adaptar mais rapidamente e se preparar para este futuro próximo.

Há algumas semanas atrás foi anunciada a compra do TypeKit – o primeiro e maior entre distribuidores de web fonts – pela Adobe. O que exatamente isto significará para o setor ainda é assunto de especulação. Certo é apenas uma coisa: a tecnologia e os hábitos continuarão mudando, num ritmo cada vez mais acelerado, e quem não se adaptar à nova realidade acabará ficando para trás. Isso aconteceu em períodos de transição anteriores (do metal para a foto-composição, da foto-composição para a tipografia digital), e não há motivos para que seja diferente agora.

Links e referências adicionais

Web fonts & @font-face

WOFF

Ferramentas

Hospedagem segura

Serviços de web fonts

Fontes SVG

W3C

EOT, EOT Lite etc