Для этого нужно использовать CSS-объявление @ font-face, которое позволяет авторам указывать онлайн-шрифты для отображения текста на своих веб-страницах. Позволяя авторам предоставлять свои собственные шрифты, @ font-face устраняет необходимость зависеть от ограниченного числа шрифтов, которые пользователи установили на свои компьютеры.
Посмотрите на следующую таблицу:
Как видите, есть несколько форматов, о которых вам нужно знать, в основном из-за кросс-браузерной совместимости. Сценарий в мобильных устройствах не сильно отличается.
Решения:
1 - полная совместимость с браузером
Это метод с самой глубокой поддержкой из возможных:
@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 */
}
2 - Большая часть браузера
Вещи сильно смещаются в сторону 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 */
}
3 - только самые последние браузеры
Или даже просто ВОФК.
Затем вы используете это так:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Ссылки и дополнительные материалы:
Это в основном то, что вам нужно знать о реализации этой функции. Если вы хотите больше изучить эту тему, я рекомендую взглянуть на следующие ресурсы. Большая часть того, что я здесь положил, извлечена из следующего