@font-face – 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

Loading