Как подключить два шрифта через CSS?
Как подключить два шрифта через CSS? Нужно подключить ArialNarrow Bold и AGAalenBold Roman. И еще вопрос где можно найти эти шрифты?
Отслеживать
задан 29 апр 2014 в 7:40
Скачал оба шрифта с расширением файла ttf. Пытаюсь их конвертировать на сайте fontsquirrel.com/tools/webfont-generator, но выдает ошибку The font is corrupt and can not be converted.
29 апр 2014 в 7:57
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
@font-face < font-family: ArialNarrow Bold; src: url(ArialNarrowBold.ttf); >@font-face < font-family: AGAalenBold Roman; src: url(AGAalenBoldRoman.ttf); >.class1 < font-family: "ArialNarrow Bold"; >.class2
Отслеживать
ответ дан 29 апр 2014 в 7:55
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак
шрифты нужно поискать в интрнете для конвертации можно использовать:
@font-face < font-family: 'шрифт1'; src: url('шрифт1.eot'); src: url('шрифт1.eot?#iefix') format('embedded-opentype'), url('шрифт1.woff') format('woff'), url('шрифт1.ttf') format('truetype'), url('шрифт1.svg#cuprumffuregular') format('svg'); font-weight: normal; font-style: normal; >@font-face
Отслеживать
ответ дан 29 апр 2014 в 7:55
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
Скачал оба шрифта с расширением файла ttf. Пытаюсь их конвертировать на сайте fontsquirrel.com/tools/webfont-generator, но выдает ошибку The font is corrupt and can not be converted.
29 апр 2014 в 8:00
Попробуйте другим сервисом
29 апр 2014 в 8:19
@font-face < font-family: "Font_name"; src: url("Fontname.woff2") format("woff2"), url("Fontname.woff") format("woff"); font-weight: 400; font-style: normal; >@font-face
Отслеживать
ответ дан 19 июн 2018 в 17:18
- шрифты
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
@font — face
Встроенных в операционные системы шрифтов часто не хватает для создания уникального дизайна сайта. Для подключения нестандартных шрифтов существует директива @font — face . С её помощью можно подключить и использовать на странице любой шрифт из файла.
При загрузке сайта браузер будет брать шрифт из указанного файла и отображать текст именно этим шрифтом.
Пример
Скопировать ссылку «Пример» Скопировано
Подключим к странице шрифт Lexend Peta и сделаем его основным шрифтом нашего сайта.
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend_Peta-webfont.woff2") format("woff2"), url("Lexend_Peta-webfont.woff") format("woff"), url("Lexend_Peta-webfont.svg") format("svg"); font-weight: normal;> body font-family: "Lexend Peta", sans-serif;>
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend_Peta-webfont.woff2") format("woff2"), url("Lexend_Peta-webfont.woff") format("woff"), url("Lexend_Peta-webfont.svg") format("svg"); font-weight: normal; > body font-family: "Lexend Peta", sans-serif; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Директива @font — face по своей «анатомии» отличается от стандартных CSS-правил, где есть селектор и применяемые к нему правила. Основное отличие в том, что на месте селектора мы активируем функцию, адресованную браузеру.
Внутри этого правила должно быть два обязательных свойства:
- Название шрифта, которое мы будем использовать ниже в CSS: свойство font — family . Название может отличаться от настоящего названия этого шрифта.
- Ссылки на файлы, из которых браузер может взять шрифт: свойство src .
Тут важно указать ссылки на файлы в нескольких форматах, чтобы любой браузер — старый или новый — мог загрузить шрифт в понятном ему формате. Принято хранить и подключать шрифты в форматах WOFF, WOFF2, SVG.
Подключение из внешних файлов происходит при помощи конструкции url ( «ссылка — на — файл» ) . Несколько файлов можно подключить, перечислив эти конструкции несколько раз через запятую.
Если указаны ссылки на несколько файлов в разных форматах, то после url ( ) оставляют браузеру подсказку в виде записи format ( «формат — подключаемого — файла» ) .
Поскольку пользователь имеет возможность устанавливать в свою систему любые нестандартные шрифты, то есть вероятность, что нужный нам шрифт уже есть на его компьютере. Если это так, то браузеру будет удобнее и быстрее взять шрифт из системы, чем читать файл.
Для этого в качестве одного или нескольких значений у свойства src можно указать конструкцию local ( «имя — шрифта — в — системе» ) . Нужно указывать локальные названия до ссылок на внешние файлы, чтобы браузер, найдя шрифт в системе под таким именем, даже не пошёл загружать и читать внешние файлы.
На сайте может использоваться один и тот же шрифт, но в разных начертаниях. Например, жирный font — weight : bold или курсив font — style : italic . В этом случае вам нужно будет подключить разные файлы, содержащие эти начертания.
Тут есть два подхода.
Первый — использовать разные @font — face для подключения разных начертаний шрифта, называя их разными именами. Например, » Lexend Peta Regular» , » Lexend Peta Bold» и » Lexend Peta Italic» . Выглядеть это будет так:
@font-face font-family: "Lexend Peta Regular"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg");> @font-face font-family: "Lexend Peta Bold"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg");> @font-face font-family: "Lexend Peta Italic"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg");>
@font-face font-family: "Lexend Peta Regular"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); > @font-face font-family: "Lexend Peta Bold"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); > @font-face font-family: "Lexend Peta Italic"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); >
Далее, ниже по коду, используем в разных местах разные начертания шрифтов:
body font-family: "Lexend Peta Regular", sans-serif;> .title font-family: "Lexend Peta Bold", sans-serif;> .accent font-family: "Lexend Peta Italic", sans-serif;>
body font-family: "Lexend Peta Regular", sans-serif; > .title font-family: "Lexend Peta Bold", sans-serif; > .accent font-family: "Lexend Peta Italic", sans-serif; >
Второй — подключить все файлы начертаний, но использовать для них одно и то же имя шрифта, указав дополнительно, для какого стиля и жирности этот файл. Тогда не нужно будет переопределять шрифт для разных элементов, достаточно будет указывать нужный стиль или жирность шрифта.
Говорим браузеру, что эти файлы используем для нормального начертания:
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); font-weight: normal;>
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); font-weight: normal; >
Говорим браузеру, что эти файлы используем для жирного начертания:
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); font-weight: bold;>
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); font-weight: bold; >
Говорим браузеру, что эти файлы используем для курсива:
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); font-style: italic;>
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); font-style: italic; >
После этого используем в разных местах разные начертания шрифтов:
body font-family: "Lexend Peta", sans-serif; font-weight: normal;> .title font-weight: bold;> .accent font-style: italic;>
body font-family: "Lexend Peta", sans-serif; font-weight: normal; > .title font-weight: bold; > .accent font-style: italic; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
Важно, чтобы файлы со шрифтами лежали на том же домене, что и сайт, на котором они используются. Если вы захотите обратиться к шрифтам из другого домена, то подобный запрос будет заблокирован по правилам безопасности запросов с разными источниками (CORS).
@font — face нужно объявлять до того, как вы обратитесь в CSS к этому шрифту. Принято подключать шрифты в самом начале файла стилей (но после всех @import ).
@font — face нельзя объявить внутри другого CSS-правила.
Важно использовать в точности то название подключённого шрифта, которое вы задаёте внутри @font — face . Иначе магия не сработает.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
Дизайнеры очень любят всякие разные нестандартные шрифты. Если видите в макете несистемный шрифт — просите файл или ссылку на шрифт у дизайнера.
Часто происходит так, что дизайнер отдаёт только TTF-файл, потому что для дизайнерских программ его достаточно. В этом случае вам нужно будет конвертировать шрифт в остальные форматы.
Держите проверенные конверторы:
- Font Converter
- Online @font-face generator
Советую всегда проверять, есть ли шрифт на сайте гуглового сервиса Google Fonts. Если найдёте, то останется только проставить нужные стили шрифта и подключить одной строкой вместо кучи @font — face . Ах, чудный идеальный мир, где все дизайнеры используют только бесплатные шрифты ♀️
Не все кастомные шрифты бесплатные. Например, студия Лебедева разрабатывает собственные шрифты. Дизайнеры в полёте фантазии могут использовать в том числе пиратские копии. Чтобы у вас и у заказчика потом не случилось проблем, просите дизайнера купить легальные версии нужных шрифтов и прислать вам исходные файлы. Или заменить платный шрифт на бесплатный.
Как осуществить подключение нескольких шрифтов в css?
Попалась верстка макета к которому прилагается аж 12 файлов .ttf одного и того же шрифта, но с разным начертанием. Шрифт PFBeauSansPro и куча его вариантов Regular, Bold, Italic, italicBold и т.д.
Почти все из них используются на странице. Вопрос вот в чем, если мне нужно подключить три файла из двенадцати или более, как должна выглядеть запись в @font-face?
@font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); >/*И повторяем этот кусок кода изменяя гарнитуру и имя файла*/
/*Либо можно использовать такой вариант?*/ @font-face < font-family: BeauSans; src: url(fonts/PFBeauSansPro-Black.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); src: url(fonts/PFBeauSansPro-BlackItalic.ttf); /*И так далее. */ >
Как будет правильно?
- Вопрос задан более трёх лет назад
- 70453 просмотра
Комментировать
Решения вопроса 2
Веб-разработчик
@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-normal.eot"); src: local('☺'), url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-normal.woff") format("woff"), url("../fonts/ptserif-normal.ttf") format("truetype"), url("../fonts/ptserif-normal.svg#PT Serif") format("svg"); font-weight: normal; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bold.eot"); src: local('☺'), url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bold.woff") format("woff"), url("../fonts/ptserif-bold.ttf") format("truetype"), url("../fonts/ptserif-bold.svg#PT Serif") format("svg"); font-weight: bold; font-style: normal; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-italic.eot"); src: local('☺'), url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-italic.woff") format("woff"), url("../fonts/ptserif-italic.ttf") format("truetype"), url("../fonts/ptserif-italic.svg#PT Serif") format("svg"); font-weight: normal; font-style: italic; >@font-face < font-family: "PT Serif"; src: url("../fonts/ptserif-bolditalic.eot"); src: local('☺'), url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), url("../fonts/ptserif-bolditalic.woff") format("woff"), url("../fonts/ptserif-bolditalic.ttf") format("truetype"), url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg"); font-weight: bold; font-style: italic; >
В font-weight можно использовать не ключевые слова, а цифры
100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black
При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта
UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1
Подробнее смотрите на caniuse.com
@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; >
font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Синтаксис
font-family: имя шрифта [, имя шрифта[, . ]] | inherit
Значения
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
- serif — шрифты с засечками (антиквенные), типа Times;
- sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
- cursive — курсивные шрифты;
- fantasy — декоративные шрифты;
- monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
HTML5 CSS2.1 IE Cr Op Sa Fx
font-family h1 < font-family: Geneva, Arial, Helvetica, sans-serif; >p Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-family
Объектная модель
[window.]document.getElementById(» elementID «).style.fontFamily
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .