@andreyWayne

Как подключить локальный шрифт .ttf в css?

Дан файл NewBaskervilleC.ttf и его нужно как то подключить локально.
Пробовал взять внешний шрифт, но что-то в нём не то...
Думаю что нужно через @font-face, но не знаю как его использовать и в гугле непонятно обьясняют
Приведите, пожалуйста, пример с данным шрифтом- как его подключить и как использовать
Буду очень благодарен!
  • Вопрос задан
  • 137 просмотров
Решения вопроса 1
  • Odisseya
    @Odisseya
    WebDev
    Конвертер в другие форматы: onlinefontconverter.com
    Подключить можно таким кодом (в т.ч. для браузеров-динозавров):
    @font-face { 
      font-family: 'Web font'; 
      src: url('webfont.eot');                                    /* IE9 Compat Modes */ 
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
           url('webfont.woff2') format('woff2'),                  /* Новейшие браузеры */ 
           url('webfont.woff') format('woff'),                    /* Новые браузеры и IE9+ */ 
           url('webfont.ttf')  format('truetype'),                /* Старые Safari, Android, iOS */ 
           url('webfont.svg#svgFontName') format('svg');          /* Древние Safari, iOS, Android */ 
      font-weight: normal; 
      font-style: normal; 
    }

    Обычно достаточно:
    @font-face { 
      font-family: 'Web font'; 
      src: url('webfont.woff2') format('woff2'), 
           url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
           url('webfont.woff') format('woff'); 
      font-weight: normal; 
      font-style: normal; 
    }

    Форматы WOFF и WOFF2 — это контейнер с более эффективным, чем ttf сжатием шрифта, как следствие шрифт грузится скорее. Там, где нужно использовать шрифт укажите правило: «font-family: 'Web font'; »
    Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы