Usando fontes .otf em navegadores da web

440

Estou trabalhando em um site que exige testes de fontes on-line, as fontes que tenho são todas .otf

Existe uma maneira de incorporar as fontes e fazê-las funcionar em todos os navegadores?

Caso contrário, que outras alternativas eu tenho?

html css fonts font-face Naruto
fonte
1
Talvez o javascript deva ser removido da lista de tags aqui?
kzh

Respostas:

754

Você pode implementar sua OTFfonte usando @ font-face como:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

No entanto, se você deseja oferecer suporte a uma ampla variedade de navegadores modernos , recomendo que você mude para WOFFe os TTFtipos de fonte. WOFFO tipo é implementado por todos os principais navegadores de desktop, enquanto o TTFtipo é um substituto para os navegadores Safari, Android e iOS mais antigos. Se sua fonte for uma fonte livre, você poderá convertê-la usando, por exemplo, um conversor de fontes online .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Se você deseja oferecer suporte a quase todos os navegadores que ainda estão por aí (não é mais necessário IMHO), adicione mais alguns tipos de fonte, como:

@font-face {
    font-family: GraublauWeb;
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

Você pode ler mais sobre por que todos esses tipos são implementados e seus hacks aqui . Para obter uma visão detalhada de quais tipos de arquivos são suportados por quais navegadores, consulte:

@ font-face Suporte ao navegador

Suporte ao navegador EOT

Suporte do navegador WOFF

Suporte ao navegador TTF

Suporte ao Navegador SVG-Fonts

espero que isto ajude

escolher
fonte
1
Funcionou perfeitamente em quase todos os navegadores ... O único navegador que não funcionou é o FireFox Linux ... Alguma sugestão para esse?
Naruto
3
Observe que, se você estiver hospedando isso em um servidor Windows, adicione o tipo de arquivo .otf como um tipo de arquivo válido e veiculado. A única maneira de verificar que esse é o problema é seguir o link para a fonte (erro 404, se houver). Você pode renomear temporariamente para .ttf ou mesmo .html para teste. As únicas fontes da Web suportadas pelo IE são o formato WOFF. (Não, nunca ouvi falar disso também!)
Henrik Erlandsson
Ei, e o desempenho desse tipo de fonte? Isso é bom? Ou outro é melhor?
Anggie Aziz 04/12/13
Existem aspas ( ") ausentes nos exemplos de código?
Steffen
2
Parece que OTF deve funcionar quase toda a linha agora caniuse.com/#search=otf
Stephen
49

Nos exemplos do Diretório de fontes do Google :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Isso funciona em vários navegadores com .ttf, acredito que possa funcionar com .otf. (A Wikipedia diz que .otf é compatível com versões anteriores com .ttf). Caso contrário, você pode converter o arquivo .otf em .ttf

Aqui estão alguns bons sites:

kzh
fonte