Incorporando fontes OTF em navegadores da Web para testes de fontes

Ao iniciar um site que requer testes de fontes on-line, um desenvolvedor enfrenta o desafio de incorporar arquivos . otf para garantir compatibilidade entre vários navegadores. Ao implementar a regra CSS @font-face, a incorporação de fontes OTF torna-se possível:

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

Considerações sobre compatibilidade de navegador

Embora as fontes OTF possam funcionar na maioria dos navegadores modernos, é crucial considerar o suporte a um espectro mais amplo de usuários. A utilização dos tipos de fonte WOFF e TTF oferece maior acessibilidade:

• WOFF: Compatível com os principais navegadores de desktop.
• TTF: Fallback para os mais antigos Navegadores Safari, Android e iOS.

Para compatibilidade perfeita, converta suas fontes .otf para formatos WOFF e TTF usando ferramentas on-line como transfonter.

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

Suporte máximo ao navegador

Para atender a quase todos os navegadores disponíveis, considere incluir tipos de fontes adicionais:

@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 */
}

Ao aproveitar essas técnicas, você pode garantir a incorporação e exibição bem-sucedidas de suas fontes OTF em todos os navegadores da web convencionais.