Как подключить ttf шрифт в css
Для подключения шрифтов в CSS используется правило @font-face . В нём обязательно используется два свойства:
- font-family — здесь указывается название шрифта, под которым он будет использоваться в проекте
- src — путь к шрифту. Обычно, в качестве значения, используется функция url() . Внутри функции указывается путь
@font-face font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); > Если начертаний шрифта несколько, например Regular , Bold , Medium и так далее, то их можно подключить под одним именем, а потом менять через свойство font-weight . Главное, что каждое начертание указывается внутри своего правила @font-face и имя шрифта должно совпадать. Так же, внутри каждого @font-face указывается своё значение font-weight :
@font-face font-weight: 400; /* Соответствует значению normal */ font-family: Roboto; src: url("../fonts/Roboto-Regular.ttf"); > @font-face font-weight: 700; /* Соответствует значению bold */ font-family: Roboto; src: url("../fonts/Roboto-Bold.ttf"); > @font-face font-weight: 300; font-family: Roboto; src: url("../fonts/Roboto-Light.ttf"); > Подключение css шрифтов локально
Искал в интернете , как подключить шрифты к сайту, с ссылкой на локальный файл, но полного ответа нигде не нашел Объясните пожалуйста по пунктам и в полном объеме, что нужно сделать, чтобы подключить шрифты к html и css файлам
Отслеживать
задан 20 фев 2020 в 5:37
vladdv861 dvin vladdv861 dvin
11 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
Так уж и не нашли? )) htmlbook.ru/blog/svoi-shrift-na-stranitse
20 фев 2020 в 5:45
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
- Находите или создаете файлы шрифтов (в разных форматах, для кросс-браузерности). Например, у вас шрифт «Шо-то-там» — вам понадобятся файлы шрифта. Кладете их в папку, например, /your-site/fonts. Получаете в ней такой набор файлов:
- st-Regular.ttf
- st-Italic.ttf
- st-Bold.ttf
- st-Regular.woff
- st-Italic.woff
- st-Bold.woff
- Создаете в css-файле столько директив @font-face, сколько файлов шрифтов у вас задействуется:
@font-face < font-family: 'Shototam'; src: url(/yoursite/fonts/st-Regular.ttf) format('ttf'), url(/yoursite/fonts/st-Regular.woff) format('woff'); font-weight: 400; >@font-face < font-family: 'Shototam'; src: url(/yoursite/fonts/st-Italic.ttf) format('ttf'), url(/yoursite/fonts/st-Italic.woff) format('woff'); font-style: italic; font-weight: 400; >@font-face < font-family: 'Shototam'; src: url(/yoursite/fonts/st-Bold.ttf) format('ttf'), url(/yoursite/fonts/st-Bold.woff) format('woff'); font-weight: 700; >- Применяете в стилях нужных элементов свойство font-family , указав «затычку» на случай неподгружения файлов шрифта: .my_bold_element
Отслеживать
ответ дан 20 фев 2020 в 9:56
Инквизитор Инквизитор
5,935 1 1 золотой знак 6 6 серебряных знаков 25 25 бронзовых знаков
- html
- css
- шрифты
- web-fonts
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Подключение шрифтов в CSS
Если не вникать в подробности, по быстрому подключить шрифт можно так:
/* Обычный */ @font-face < font-family: 'FontName'; src: url(/fonts/font.ttf); >/* Жирный */ @font-face < font-family: 'FontName bold'; src: url(/fonts/font-bold.ttf); >.text-1 < font-family: 'FontName'; font-size: 20px; >.text-2
Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:
- Нет названия шрифта в свойстве local .
- Подключен только один формат шрифта.
- Неправильно настроены начертания.
Локальные шрифты
Правило @font-face src позволяет задать название локального шрифта, т.е. если у пользователя на компьютере уже установлен нужный шрифт, то будет использоваться именно он, при этом существенно увеличится скорость загрузки и отрисовки страницы.
@font-face < font-family: 'Font Name'; src: local('Font Name'), url(/fonts/font.ttf); >Можно указать несколько названий:
@font-face < font-family: 'Font Name'; src: local('Font Name'), local('Font-Name'), url(/fonts/font.ttf); >Форматы шрифтов
Сегодня используются четыре формата, рассмотрим их подробнее:
TTF/OTF – работают в большинстве браузеров, кроме IE.
EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.
WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.
WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.
Как видно нет единого формата, который поддерживается всеми браузерами, поэтому нужно делать подключение нескольких файлов, браузер сам выберет подходящий формат. Рекомендуется подключать файлы шрифтов по приоритету:
- WOFF2 для современных браузеров.
- WOFF для браузеров, которые не поддерживают WOFF2.
- TTF для устаревших браузерах
- EOT для поддержки IE.
@font-face < font-family: 'Font Name'; src: local('Font Name'), url('/fonts/font.woff2') format('woff2'), url('/fonts/font.woff') format('woff'), url('/fonts/font.ttf') format('ttf'), url('/fonts/font.eot') format('eot'); >Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов onlinefontconverter.com или convertio.co.
Разные начертания шрифтов
Пример подключения шрифта «Crimson Text» в разных начертаниях:
Обычный:
/* Обычный */ @font-face < font-family: 'Crimson Text'; font-style: normal; font-weight: normal; src: local('Crimson Text'), url('/fonts/CrimsonText-Regular.woff2') format('woff2'), url('/fonts/CrimsonText-Regular.woff') format('woff'), url('/fonts/CrimsonText-Regular.ttf') format('ttf'), url('/fonts/CrimsonText-Regular.eot') format('eot'); >.text-1
Как подключить локальный шрифт .ttf в css?
Дан файл NewBaskervilleC.ttf и его нужно как то подключить локально.
Пробовал взять внешний шрифт, но что-то в нём не то.
Думаю что нужно через @font-face, но не знаю как его использовать и в гугле непонятно обьясняют
Приведите, пожалуйста, пример с данным шрифтом- как его подключить и как использовать
Буду очень благодарен!
- Вопрос задан более трёх лет назад
- 20930 просмотров
Комментировать
Решения вопроса 1
Оптимизирую PageSpeed & Performance
Конвертер в другие форматы: onlinefontconverter.com
Подключить можно таким кодом (в т.ч. для браузеров-динозавров):
@font-face < font-family: 'Web font'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Новейшие браузеры */ url('webfont.woff') format('woff'), /* Новые браузеры и IE9+ */ url('webfont.ttf') format('truetype'), /* Старые Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Древние Safari, iOS, Android */ font-weight: normal; font-style: normal; >Обычно достаточно:
@font-face < font-family: 'Web font'; src: url('webfont.woff2') format('woff2'), url('webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; >Форматы WOFF и WOFF2 — это контейнер с более эффективным, чем ttf сжатием шрифта, как следствие шрифт грузится скорее. Там, где нужно использовать шрифт укажите правило: «font-family: ‘Web font’; »