Как подключить шрифт ttf к сайту

У нас есть какой-то шрифт в формате ttf и его нужно подключить к сайту, как вообще подключают шрифты к сайтам!?

Мы немного говорили на тему шрифтов .Но процесс подключения шрифта на сайт, вообще не затрагивали!
Про шрифт awesome мы говорили, но там немного другая ситуация!
И так… погнали! Подключим наш шрифт к нашему сайту. И да… подключение шрифта к компу мы тоже делали.
Нам понадобится сам шрифт.

Установка шрифта с помощью @font-face.

1. Первым делом нужно подключить шрифт с помощью @font-face – в файле css нужно написать такую строчку :
@font-face { font-family: Название шрифта; src: url(https://ваш_сайт.ru/путь_до_файла_шрифта.ttf); }

С нашим примером… а мы будем любой например шрифт терминатор и подключение шрифта будет выглядеть таким образом:

@font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/__a-data/___new_dw/__template/fonts/terminator_cyr_semi-expanded_bold.ttf); }
2. Здесь… есть один подводный камень, о который многие стукаются!

Название шрифта очень часто не совпадает с тем, как может отображаться название файла шрифта скачанного…

Поэтому ... скачали шрифт... на комп... кликаем по шрифту... и нам нужно вот это:

ИМЯ ШРИФТА

Что мы и выделили в строке подключения @font-face(см.пункт 1)


3. Ну и собственно - теперь нам нужно… какой-то стиль, чтобы к нем у приклеить данный шрифт…

Давайте соорудим вот такую конструкцию:

<div class="example_font">Здесь текст, example of text</div>

Далее нам понадобится файл css - можно написать прямо под подключением

div.example_font {font-family: 'Terminator Cyr' ; color: red; }

Если вы подключали шрифт в файле css, то у вас должно получиться...

@font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/__a-data/___new_dw/__template/fonts/terminator_cyr_semi-expanded_bold.ttf); }


div.example_font {font-family: 'Terminator Cyr' ; color: red; }

Если вы подключали шрифт в конкретном файле, то у вас должно получиться...

<style>

@font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/__a-data/___new_dw/__template/fonts/terminator_cyr_semi-expanded_bold.ttf); }


div.example_font {font-family: 'Terminator Cyr' ; color: red; }

</style>

Результат:

Здесь текст, example of text

---

Вас может еще заинтересовать список тем : #CSS | #FONTS |

---

Теги:
как подключить шрифт к сайтукак подключить шрифт к сайту cssкак подключить шрифт к сайту htmlподключить ttf шрифт к сайтуподключить шрифт к сайту css ttf