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

Поддержи проект!!!

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

Всё о подключении шрифта на сайте font-face

1. Установка шрифта с помощью @font-face.
2. Имя шрифта и название файла отличаются -> ошибка подключения
3. Живой пример подключения шрифта на сайте

О шрифтах font-face

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

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


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

Первым делом нужно подключить шрифт с помощью @font-face – в файле css нужно написать такую строчку :

@font-face { font-family: Название шрифта; src: url(https://ваш_сайт.ru/путь_до_файла_шрифта.ttf); }

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

@font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/___dwweb.ru/__template/fonts/terminator.ttf); }

Имя шрифта и название файла отличаются -> ошибка подключения

Здесь… есть один подводный камень, о который многие стукаются!

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

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

ИМЯ ШРИФТА

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



Живой пример подключения шрифта на сайте

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

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

<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/___dwweb.ru/__template/fonts/terminator.ttf); }


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

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

<style>

@font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/___dwweb.ru/__template/fonts/terminator.ttf); }


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

</style>

Результат подключения шрифта font-family на сайте:

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

---

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

---

Последняя дата редактирования : 2020-05-17 06:11
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode

🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
font-face как подключить шрифт к сайтукак подключить шрифт к сайту cssкак подключить шрифт к сайту htmlподключить ttf шрифт к сайтуподключить шрифт к сайту css ttf