DWWEB.RU
СКРИПТЫ

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

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

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

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

  1. Первым делом нужно подключить шрифт с помощью @font-face – в файле css нужно написать такую строчку :
  2. @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); }

  3. Здесь… есть один подводный камень, о который многие стукаются!
  4. Название шрифта очень часто не совпадает с тем, как может отображаться название файла шрифта скачанного…

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

    ИМЯ ШРИФТА

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

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

    <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

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

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

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019