Включение пользовательских шрифтов с использованием .ttf и CSS

Вы хотите включить шрифт .ttf на свою веб-страницу, но столкнулись с трудностями. Давайте рассмотрим ваш код:

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

В чем проблема?

Включение только файла .ttf недостаточно для кроссбраузерной совместимости. Чтобы охватить широкий спектр браузеров, вам потребуется несколько форматов шрифтов.

Комплексное решение:

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

В этом коде предполагается, что у вас есть форматы .eot, .woff, .ttf и SVG для вашего веб-шрифта. Генераторы веб-шрифтов, такие как Font Squirrel или Transfonter, могут автоматизировать этот процесс.

Современный подход:

Современные браузеры предпочитают шрифты .woff, поэтому вы также можете упростить свой код:

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

Дополнительные ресурсы:

• Трюки по CSS: использование @font-face: https://css-tricks.com/snippets/css/using- font-face/
• Могу ли я использовать шрифт: https://caniuse.com/fontface