Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

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

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

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

  1. Установка шрифта с помощью @font-face.
  2. Имя шрифта и название файла отличаются -> ошибка подключения
  3. Живой пример подключения шрифта на сайте
  1. О шрифтах 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/путь до файла/terminator.ttf); }

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

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

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

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

      ИМЯ ШРИФТА

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

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

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

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

      <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/путь до файла/terminator.ttf); }

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

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

      <style>

      @font-face { font-family: Terminator Cyr; src: url(https://dwweb.ru/путь до файла/terminator.ttf); }

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

      </style>

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

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


    Вас может еще заинтересовать список тем : #CSS | #FONTS |
    Последняя дата редактирования : 2020-11-14 13:43
    //dwweb.ru/comments_1_5/include/img/hand_no_foto.png
    no
    no
    Еще никто не прокомментировал! COMMENTS+   BBcode
    аватар
    🞨
    Загрузить свой аватар
    (max ширина, высота = 200px)

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

Последние комментарии :
Марат :
19/01/2021 01:13
Всегда пожалуйста!Приходите ещё!
подробнее.
аркадий :
19/01/2021 01:08
Спасибо!Меню вернулось. Класс!
подробнее.
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.