Использование шрифтов True type в веб-приложениях

В настоящее время я вижу, что на многих веб-сайтах используются шрифты истинного типа. Я хочу знать, как использовать истинные шрифты в наших приложениях и влияет ли это на время загрузки страниц?

Ответ 1

Встраивание шрифтов может быть немного сложным из-за проблем совместимости с браузером. Например, Safari поддерживает только шрифты SVG. IE поддерживает только .eot, который должен быть сначала преобразован из .ttf

Я нашел самый простой способ использовать пользовательские шрифты с Google Fonts Помимо наличия бесплатного каталога шрифтов google на выбор, существует несколько поставщиков, которые предоставляют гораздо более широкий выбор шрифтов бесплатно и для покупки.

Ответ 2

HTML5 позволяет использовать TTF шрифты в CSS:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Чтобы использовать его:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Проверьте дополнительную информацию в html5rocks.

Ответ 3

Вы используете Font Embedding.

Это повлияет на общее время загрузки страницы, так как данные шрифта должны быть загружены, а также другое содержимое, стили и т.д. Однако он будет кэшироваться, что влияет только на первый вид страницы.

Ответ 4

Я хочу обновить принятый ответ из-за значительного времени. Следующее - то, что Font Squirrel выдает в соответствии с их рекомендуемой настройкой "Оптимальная". Поддержка .ttf на этом этапе уже не важна и ее следует игнорировать.

font-family: 'Tagesschrift';
  src: url('tagesschrift.woff2') format('woff2'),
       url('tagesschrift.woff') format('woff');
  font-weight: normal;
  font-style: normal;