Incluindo fontes personalizadas usando .ttf e CSS

Você deseja incorporar uma fonte .ttf em sua página da web, mas encontra dificuldades. Vamos examinar seu código:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

Onde está o problema?

Incluir apenas um arquivo .ttf é insuficiente para compatibilidade entre navegadores. Para cobrir uma ampla variedade de navegadores, você precisa de vários formatos de fonte.

Solução abrangente:

@font-face {
    font-family: 'MyWebFont';
    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 */
}

Este código pressupõe que você tenha os formatos .eot, .woff, .ttf e SVG para sua fonte da web. Geradores de fontes da Web como Font Squirrel ou Transfonter podem automatizar esse processo.

Abordagem moderna:

Os navegadores modernos preferem fontes .woff, então você também pode simplificar seu código:

@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6 , Firefox 3.6 , IE 9 , Safari 5.1  */
         url('myfont.ttf') format('truetype'); /* Chrome 4 , Firefox 3.5, Opera 10 , Safari 3—5 */
}

Recursos adicionais:

• Truques CSS: usando @font-face: https://css-tricks.com/snippets/css/using- font-face/
• Posso usar fontface: https://caniuse.com/fontface