Normalmente, ao usar fontes personalizadas em um site de cliente, utilizaremos um serviço de terceiros, como TypeKit ou Fonts.com. Infelizmente, usar um serviço de terceiros não era uma opção da última vez.
No interesse da velocidade, hospedamos todos os nossos ativos no S3, que é então distribuído em todo o mundo via Cloudfront. As fontes não foram exceção, no entanto, encontramos algumas pegadinhas ao longo do caminho.
Acontece que as fontes da web estão sujeitas ao Compartilhamento de Recursos entre Origens (CORS). CORS é uma maneira de um host remoto controlar o acesso a certos tipos de recursos. Certos navegadores (Chrome, Safari) irão ignorar o CORS e fazer a solicitação enquanto outros (IE, Firefox).
Para garantir que todos os navegadores possam recuperar as fontes, você deve seguir as instruções abaixo:
S3
- Selecione o balde em questão.
- Selecione a guia “Propriedades”.
- Expanda a seção “Permissões”.
- Clique no botão “Editar configuração CORS”.
- Digite o seguinte na caixa (edite para seu domínio): https://gist.github.com/tmilewski/bfaebc876cc116623e86
Cloudfront
A implementação do S3 é fácil, mas o Cloudfront (ou qualquer CDN) tem um grande obstáculo que leva a muita confusão e frustração:
HTTP / HTTPS
No exemplo S3, permitimos que as solicitações viessem de HTTP e HTTPS. Quando um CDN entra em cena, ele armazena em cache a resposta do S3. Portanto, se você solicitar a fonte com HTTPS, qualquer solicitação CORS futura de HTTP falhará infelizmente (e vice-versa).
Escolha um e fique com ele.
Respostas relacionadas:
Fontes comuns para Windows e Mac