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

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

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

У нас есть какой-то шрифт в формате 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/___dwweb.ru/__template/fonts/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/___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

Последние комментарии :
Марат :
02/09/2020 03:25
Рад, что помог! Приходите еще!
подробнее.
Алексей :
02/09/2020 01:16
Спасибо Кое-что пригодилось!
подробнее.
Павел :
26/08/2020 05:57
textarea В таблице, а таблица в родительском div, а этот див является частью аккордеона, сам textarea без displey: none, но…
подробнее.
Марат :
26/08/2020 04:22
Столько написали и ничего не понятно!У вас есть textarea со свойством "display: none;" - непонятно... зачем textarea скрытый и…
подробнее.
Павел :
26/08/2020 08:02
Здравствуйте. Пишу плагин для таблицы, в таблице много textarea, плагин и таблица расположены в скрытой вкладке…
подробнее.