Como liberar o acesso externo a fontes no seu servidor Linux com .htaccess

Essa solução é pouco utilizada, mais tive essa necessidade duas vezes em meus projetos, e decidi compartilhar a solução que utilizei aqui para que sirva para projetos futuros ou para alguém que possa esta passando por esse problema.

Primeiro vamos saber. O que é um CDN?

CDN é o termo técnico, traduzido literalmente para o portugues como Rede de fornecimento, entrega e distribuição de conteúdo, é um termo criado para descrever um sistema de computadores e redes interligados através da Internet, que cooperam de modo transparente para fornecer conteúdo (particularmente grandes conteúdos de mídia) a usuários finais. a Maioria dos CDNs atuais utilizam Anycast para distribuição e roteamento. Simplificando, CDN, é uma maneira de enviar conteúdo massivo para usuários sem ter problemas com performance.

Exemplos de CDN conhecidos que utilizamos com frequência no desenvolvimento web:

Biblioteca JQuery por Exemplo:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Font Awesome por Exemplo:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Observe nos códigos acima que os arquivos Jquery-3.3.1.min.js está vindo do servidor “code.jquery.com” e o arquivo “all.css” esta vindo do servidor “use.fontawesome.com” neste caso você pode utilizá-los em suas páginas mais eles estão vindo de um CDN não de seu servidor próprio.

O Problema:

Criar uma estrutura em HTML com todas as ligações de estilo, imagens e javascript hospedada em um servidor externo, esse tipo de programação é muito utilizada para criação de e-mails marketing ou programas que não hospeda imagens, css e js mais tem a necessidade de carregar a estrutura em HTML formatada.

Neste caso não iremos entrar em detalhes de como criamos esse tipo de estrutura, mais os links para os arquivos são todos de forma absoluta ou seja ao invés de utilizarmos o caminho para referenciar uma folha de estilo por exemplo dessa forma “../css/style.css” utilizamos esse mesmo arquivo de forma absoluta o link completo “http://meudominio.com.br/css/style.css” onde esse endereço é o caminho absoluto do arquivo na internet.

Para quando nosso HTML for acessado de qualquer lugar com acesso a Internet consiga carregar esse aquivo style.css e dar estilo a nossa página, por aí tudo certo não é novidade para ninguém que tem costume de montar páginas em HTML, o problema é o seguinte.

Quando você tem a necessidade de utilizar uma fonte diferente para dar forma ao seu texto ou para utilizar ícones, e essa fonte está em seu servidor Linux devidamente hospedado e utilizando o parâmetro @font-face do CSS para carregar essa fonte em seu HTML com a URL absoluta correta, e quando você acessa o HTML no navegador, e as fontes que você referenciou não carrega o estilo desejado ou não exibe os ícones que precisava.

Isso ocorre por que seu servidor bloqueou o acesso externo para utilização dessa fonte, então o seu servidor deve ser configurado conforme uma CDN para permitir a utilização externa desse tipo de arquivos, vamos utilizar o HTACCESS para fazer essa permissão, basta inserir o seguinte trecho abaixo em seu arquivo .htaccess.

A solução:

Está com problemas para renderizar alguma de suas fontes, pela propriedade @font-face em alguns navegadores, principalmente Firefox e IE?

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

Realmente é algo bem raro de se usar, mais quem passa por isso, geralmente não sabe como corrigir, fica batendo cabeça e lutando pensando que o caminho do arquivo está errado, então fica aí a dica, se ela foi útil para você compartilhe e deixe-nos saber nos comentários abaixo, sinta-se livre para dar uma olhada a sua volta.