Скачать и подключить шрифт Arial и Roboto.
Шрифт Arial от Microsoft.
Файл zip содержит 32 варианта шрифта Arial. Скачать здесь1. Для подключения шрифта к странице сайта используем правило @font-face.
CSS правило @font-face позволяет использовать собственный шрифт, загружаемый с вашего сервера, для отображения на веб-странице. Отличие таких шрифтов состоит в том, что обычные безопасные шрифты отображаются на веб-странице только в том случае, если они есть на компьютере пользователя, а шрифты, подключаемые с помощью @font-face, будут загружаться с сервера.
Для подключения шрифта нужно создать правило @font-face и, с помощью свойства font-family, определить для него имя. Я назвал шрифт Lanarial. Потом указывается расположение шрифта, путь может быть как относительным так и абсолютным. Относительные ссылки ведут отсчет от корня сайта. Абсолютные адреса должны начинаться с указания протокола (обычно https://) и содержать имя сайта. В примере ниже, шрифты ArialMT.ttf и ArialMT.eot должны быть размещены в одной папке с файлом style.css В моём случае в одной папке с lanstyle20.css
@font-face {font-family: Lanarial; src: url("ArialMT.ttf"), url("ArialMT.eot");}
Для того, чтобы шрифт отображался во всех браузерах, нужно будет указать через запятую несколько файлов с различными расширениями. Разные браузеры поддерживают разные расширения файлов, поэтому не получиться указать единственный файл для корректной работы во всех браузерах.
Примечание.
Мне не понравился ни один из 32 вариантов шрифта Arial.
Шрифт Roboto от Google.
Файл zip содержит 12 вариантов шрифта Roboto. Только ttf файлы. Скачать здесь2. Выбираем шрифт Roboto-Regular.ttf и подключаем строкой
@font-face {font-family: Lanroboto; src: url("Roboto-Regular.ttf");}
Теперь этот шрифт можно применять к нужным блокам или сразу к тегу body.
body {font-family: Lanroboto;}