Как подключить шрифт ttf к сайту примеры
У нас есть какой-то шрифт в формате ttf и его нужно подключить к сайту с помощью font-face , как вообще подключают шрифты к сайтам!?
Всё о подключении шрифта на сайте font-face
- Установка шрифта с помощью @font-face.
- Имя шрифта и название файла отличаются ->
ошибка подключения - Живой пример подключения шрифта на сайте
О шрифтах font-face
Про шрифт awesome мы говорили, но там немного другая ситуация!
Нам понадобится сам шрифт.
Установка шрифта с помощью @font-face.
Первым делом нужно подключить шрифт с помощью @font-face – в файле css нужно написать такую строчку :
С нашим примером… а мы будем любой например шрифт терминатор и подключение шрифта будет выглядеть таким образом:
Имя шрифта и название файла отличаются -> ошибка подключения
Здесь… есть один подводный камень, о который многие стукаются!
Название шрифта очень часто не совпадает с тем, как может отображаться название файла шрифта скачанного…
Поэтому ... скачали шрифт... на комп... кликаем по шрифту... и нам нужно вот это:
Что мы и выделили в строке подключения @font-face(см.пункт 1)

Живой пример подключения шрифта на сайте
Ну и собственно - теперь нам нужно… какой-то стиль, чтобы к нем у приклеить данный шрифт…
Давайте соорудим вот такую конструкцию:
Далее нам понадобится файл css - можно написать прямо под подключением
div.example_font {font-family: 'Terminator Cyr' ; color: red; }
Если вы подключали шрифт в файле css, то у вас должно получиться...
div.example_font {font-family: 'Terminator Cyr' ; color: red; }
Если вы подключали шрифт в конкретном файле, то у вас должно получиться...
<style>
@font-face { font-family:div.example_font {font-family: 'Terminator Cyr' ; color: red; }
</style>
Результат подключения шрифта font-family на сайте:
font-face как подключить шрифт к сайту как подключить шрифт к сайту css как подключить шрифт к сайту html подключить ttf шрифт к сайту подключить шрифт к сайту css ttf