Como resolver quando a fonte do site não está presente no computador do usuário

Como resolver quando a fonte do site não está presente no computador do usuário

Fontes especiais dão uma aparência muito mais agradável e diferenciada para um site, porém a maioria das fontes especiais não estão presentes na máquina do usuário, sendo assim o quando o usuário acessa um site com fonte especial, o browser não consegue renderizar a fonte, e acaba abrindo o site com uma fonte padrão tipo Arial ou Times.

Existem várias formas de resolver isso, porém estarei falando da forma que uso habitualmente.

Atributo @font-face

Método interno

É a forma recomendada para quem quer uma fonte diferente, 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 ao artigo 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.

Caso deseje saber sobre família de fontes, acesso o artigo Família de Fontes do site Maujor

Com informações de Bernard de Luna

Fabio Bmed

Olá! Sou Fábio, fundador da Metapax — especializada em marketing e soluções digitais para clínicas e profissionais de psicologia — e criador do blog FabioBmed.

Desde 2006 trabalho com tecnologia e marketing digital. Mas os sistemas que mais me fascinam hoje são os que carregamos dentro da cabeça.

Estou entrando na psicologia, com foco em neuropsicologia — a ciência que explica por que você pensa, decide e se comporta do jeito que faz. Essa transição não é um desvio de rota: é a evolução natural de quem passou anos entendendo como sistemas funcionam — e percebeu que o mais complexo de todos ainda estava por ser mapeado.

Aqui, tudo — marketing, tecnologia, comportamento, decisões — é lido pelo mesmo prisma: a psicologia e a ciência por trás de como a mente humana realmente funciona.

www.fabiobmed.com.br