Erros e soluções alternativas do Firefox @fontface

Ok, então depois das últimas horas eu tenho cavado e cavado porque eu não conseguia entender por que meu woff’s / ttf’s @fontface se recusou a aparecer.

Para salvar a todos da angústia que passei, pensei em compilar um guia rápido sobre como fazê-los funcionar … na maioria (se não em todas) as situações.

1. Estou trabalhando localmente e a fonte não aparece

O que você precisa fazer é digitar about: config Na barra de endereço, procure por security.fileuri.strict origin policy e dê um clique duplo nela / desative-a. (defina como falso)

2. O site é publicado e eu tenho acesso ao servidor

Você precisa adicionar algum código ao seu .htaccess para solicitar que cabeçalhos adicionais sejam enviados especificamente para arquivos de fonte.

# 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

Isso ainda não está funcionando?

Se você estiver usando o IIS da Microsoft, você precisará adicionar algum código no bloco web.config system.webServer.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Se você precisar restringir o acesso a um domínio específico, certifique-se de substituir o * pelo domínio.

3. O site está publicado, mas não tenho acesso ao servidor (ou seja, Tumblr etc.)

É aqui que fica complicado e leva mais tempo (e é realmente o motivo pelo qual estou escrevendo este guia)

Ok, o que vamos fazer é codificar em base64 seu arquivo de fonte como um .woff, incorporar (para Chrome + Firefox) e adicionar algum legado do IE.

Em primeiro lugar, você precisa pegar seu arquivo de fonte e acessar o gerador de kit The FontSquirrel @fontface .

Adicione sua fonte e clique no botão de opção “Especialista”

Manter todas as opções como normal, mas sob CSS: acertar o Base64 Encode checkbox

Concorde com os termos e faça download.

Deverá ser apresentado a você um arquivo zip, os únicos dois arquivos que você precisa são o arquivo CSS (no meu caso e se você não alterou as opções stylesheet.css ) e o arquivo EOT .

Abra seu arquivo CSS e verifique as linhas, você verá algo como

@font-face {
    font-family: 'fontnameregular';
    src: url('fontname-webfont-webfont.eot');
    }

@font-face {
    font-family: 'fontnameregular';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAxYABEAAAAAIpQAAQAAAAAAA[truncated]) format('woff'),
         url('fontname-webfont-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Você pode inserir isso em seu código, mas não funcionará, foi aqui que fiquei frustrado, a primeira coisa que você precisa fazer é alterar a string de codificação de base64

No exemplo acima, ele começa com

data:application/x-font-woff;charset=utf-8;base64,

Mude para

data:font/woff;base64,

Então (se você quiser, pessoalmente eu fiz) retire a vírgula no final dessa linha e livre-se de

url('fontname-webfont-webfont.ttf') format('truetype');

Como descobri que você não precisa, se alguém achar que estou errado, envie-me uma mensagem e atualizarei o guia.

Agora copie e cole o código em seu arquivo CSS, copie seu arquivo EOT em algum lugar seguro para o link, atualize a URL e você estará pronto para prosseguir!

Obrigado pela leitura