A @font-faceregra permite que fontes personalizadas sejam carregadas em uma página da web. Depois de adicionada a uma folha de estilo, a regra instrui o navegador a baixar a fonte de onde está hospedada e, em seguida, exibi-la conforme especificado no CSS.
Sem a regra, nossos designs são limitados às fontes que já estão carregadas no computador de um usuário, que variam dependendo do sistema que está sendo usado. Aqui está uma boa análise das fontes de sistema existentes.
Suporte de navegador mais profundo possível
Este é o método com o suporte mais profundo possível no momento. A @font-faceregra deve ser adicionada à folha de estilo antes de qualquer estilo.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Em seguida, use-o para estilizar elementos como este:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Nível prático de suporte do navegador
As coisas estão mudando fortemente em direção a WOFF e WOFF 2, então provavelmente podemos nos safar com:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3,6+ | 11,50+ | 9+ | 4,4+ | 5.1+ |
Suporte um pouco mais profundo para o navegador
Se você precisa de uma espécie de meio termo entre o suporte total e o suporte prático, isso cobrirá mais algumas bases:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10,1+ | 9+ | 2.2+ | 4.3+ |
Suporte a navegador super progressivo
Se estivermos apostando em WOFF, então podemos esperar que as coisas mudem em direção a WOFF2 em algum momento. Isso significa que podemos viver na vanguarda com:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Não | 35+ com bandeira | 23+ | Não | 37 | Não |
Técnicas Alternativas
@import
Embora @font-faceseja excelente para fontes hospedadas em nossos próprios servidores, pode haver situações em que uma solução de fonte hospedada seja melhor. Google Fonts oferece isso como uma forma de usar suas fontes. A seguir está um exemplo de uso @importpara carregar a fonte Open Sans do Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Então, podemos usá-lo para estilizar elementos:
body ( font-family: 'Open Sans', sans-serif; )Se você abrir o URL da fonte, poderá realmente ver todo o @font-facetrabalho sendo feito nos bastidores.
Um benefício de usar um serviço hospedado é que ele provavelmente incluirá todas as variações do arquivo de fonte, o que garante uma compatibilidade profunda entre navegadores sem ter que hospedar todos esses arquivos.
Veja a Caneta usando @import para fontes personalizadas por CSS-Tricks (@ css-tricks) no CodePen.
criando uma folha de estilo
Da mesma forma, você pode vincular ao mesmo recurso que faria com qualquer outro arquivo CSS, no documento HTML em vez de no CSS. Usando o mesmo exemplo do Google Fonts, isso é o que usaríamos:
Então, podemos estilizar nossos elementos como os outros métodos:
body ( font-family: 'Open Sans', sans-serif; )Novamente, isso é importar as @font-faceregras, mas, em vez de injetá-las em nossa folha de estilo, elas são adicionadas ao nosso HTML .
Veja a Caneta usando para fontes personalizadas por CSS-Tricks (@ css-tricks) no CodePen.
É sobre a mesma coisa ... ambas as técnicas baixam os ativos necessários.
Compreendendo os tipos de arquivo de fonte
O trecho original no topo deste post faz referência a muitos arquivos com extensões estranhas. Vamos examinar cada um deles e entender melhor o que significam.
WOFF / WOFF2
Significa: Web Open Font Format.
Criadas para uso na web e desenvolvidas pela Mozilla em conjunto com outras organizações, as fontes WOFF geralmente carregam mais rápido do que outros formatos porque usam uma versão compactada da estrutura usada pelas fontes OpenType (OTF) e TrueType (TTF). Este formato também pode incluir metadados e informações de licença no arquivo de fonte. Este formato parece ser o vencedor e para onde todos os navegadores estão indo.
WOFF2 é a próxima geração de WOFF e possui melhor compressão do que o original.
SVG / SVGZ
Significa: Elementos gráficos vetoriais escaláveis (fonte)
SVG é uma recriação vetorial da fonte, o que a torna muito mais leve em tamanho de arquivo e também a torna ideal para uso móvel. Este formato é o único permitido pela versão 4.1 e inferior do Safari para iOS. Fontes SVG não são suportadas atualmente pelo Firefox, IE ou IE Mobile. O Firefox adiou a implementação indefinidamente para se concentrar no WOFF.
SVGZ é a versão compactada do SVG.
EOT
Significa: Embedded Open Type.
Este formato foi criado pela Microsoft (os inovadores originais da @font-face) e é um padrão de arquivo proprietário suportado apenas pelo IE. Na verdade, é o único formato que o IE8 e versões anteriores reconhecerão ao usar @font-face.
OTF / TTF
Significa: Fonte OpenType e Fonte TrueType.
O formato WOFF foi inicialmente criado como uma reação ao OTF e TTF, em parte porque esses formatos poderiam ser facilmente (e ilegalmente) copiados. No entanto, o OpenType tem recursos que podem interessar a muitos designers (ligaduras e outros).
Uma nota sobre o desempenho
As fontes da web são ótimas para design, mas é importante também entender seu impacto no desempenho da web. Fontes personalizadas geralmente fazem com que os sites tenham um impacto no desempenho porque a fonte deve ser baixada antes de ser exibida.
Um sintoma comum costumava ser um breve momento em que as fontes carregam primeiro como reserva e, em seguida, piscam para a fonte baixada. Paul Irish tem uma postagem mais antiga sobre isso (apelidada de “FOUT”: Flash Of Unstyled Text).
Atualmente, os navegadores geralmente ocultam o texto antes que a fonte personalizada seja carregada por padrão. Melhor ou pior? Você decide. Você pode exercer algum controle sobre isso por meio de várias técnicas. Um pouco fora do escopo deste artigo, mas aqui está um trio de artigos de Zach Leatherman para você começar a descer pela toca do coelho:
- Better @ font-face com eventos de carregamento de fonte
- Como usamos fontes da web de forma responsável, ou evitando um @ font-face-palm
- Flash of Faux Text - ainda mais sobre carregamento de fontes
Aqui estão mais algumas considerações ao implementar fontes personalizadas:
Observe o tamanho do arquivo
As fontes podem ser surpreendentemente pesadas, então opte por opções que ofereçam versões mais leves. Por exemplo, dê preferência a um conjunto de fontes de 50 KB em comparação com um de 400 KB.
Limite o conjunto de caracteres, se possível
Você realmente precisa dos pesos negrito e preto para uma fonte? Limitar seus conjuntos de fontes para carregar apenas o que é usado é uma boa ideia e há algumas dicas boas sobre isso aqui.
Considere as fontes do sistema para telas pequenas
Muitos dispositivos estão presos em conexões ruins. Um truque pode ser atingir telas maiores ao carregar a fonte personalizada usando @media.
Neste exemplo, as telas menores que 1000px receberão uma fonte do sistema, e as telas com largura e acima receberão a fonte personalizada.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Serviços de fonte
Há vários serviços que hospedam fontes e também fornecem acesso a fontes licenciadas comercialmente. Os benefícios de usar um serviço geralmente se resumem em ter uma grande seleção de fontes legais entregues de forma eficiente (por exemplo, disponibilizando-as em um CDN rápido).
Aqui estão alguns serviços de fonte hospedados:
- Tipografia de nuvem
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typotheque
- Fonts.com
- Fontes do Google
- Esquilo de fonte
E quanto às fontes de ícone?
É verdade, @ font-face pode carregar um arquivo de fonte cheio de ícones que podem ser usados para um sistema de ícones. No entanto, acho que é muito melhor usar SVG como um sistema de ícones. Aqui está uma comparação dos dois métodos.
Mais recursos
- Noções básicas da API Google Font
- Famílias de fontes CSS