Как подключить несколько шрифтов css
Перейти к содержимому

Как подключить несколько шрифтов css

  • автор:

Как подключить два шрифта через 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 серебряных знаков 66 66 бронзовых знаков

Скачал оба шрифта с расширением файла ttf. Пытаюсь их конвертировать на сайте fontsquirrel.com/tools/webfont-generator, но выдает ошибку The font is corrupt and can not be converted.

@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-правил, где есть селектор и применяемые к нему правила. Основное отличие в том, что на месте селектора мы активируем функцию, адресованную браузеру.

Внутри этого правила должно быть два обязательных свойства:

  1. Название шрифта, которое мы будем использовать ниже в CSS: свойство font — family . Название может отличаться от настоящего названия этого шрифта.
  2. Ссылки на файлы, из которых браузер может взять шрифт: свойство 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 . Ах, чудный идеальный мир, где все дизайнеры используют только бесплатные шрифты ��‍♀️

�� Не все кастомные шрифты бесплатные. Например, студия Лебедева разрабатывает собственные шрифты. Дизайнеры в полёте фантазии могут использовать, в том числе, пиратские копии. Чтобы у вас и у заказчика потом не случилось проблем, просите дизайнера купить легальные версии нужных шрифтов и прислать вам исходные файлы, или заменить платный шрифт на бесплатный.

Как подключить несколько шрифтов в html?

Но в css написано нужно вставлять font-family: ‘IBM Plex Sans’, sans-serif; .
То есть, текст становится одним стилем данного шрифта.
Как задавать определённый стиль?
То есть как, прописать для одного тега

шрифт regular 400 , а для другого тега

bold 700 italic , а один

вообще поставить в шрифт Open sea?

  • Вопрос задан более двух лет назад
  • 730 просмотров

2 комментария

Простой 2 комментария

ну в сss есть селекторы, там можно определить начертание и «жирность» шрифта. Потренируйся на Arial.

то есть как прописать для одного тега шрифт regular 400
А для другого тега bold 700 italic

так и написать
p

Ankhena

Ankhena @Ankhena Куратор тега CSS

но в css написано нужно вставлять font-family: ‘IBM Plex Sans’, sans-serif;

Да, потому что font-family у них один общий.
А различается только жирность и/или начертание.

Если основной шрифт на сайте IBM Plex Sans, то для body прописывайте:
font-family: «IBM Plex Sans», sans-serif;
Затем, для тех блоков, которым нужна жирность отличная от 400 или той, что вы дополнительно указали для body, задаете свой font-weight.

Всё аналогично тому, как вы пишете про размер шрифта.

Решения вопроса 2

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer

То есть как, прописать для одного тега шрифт regular 400, а для другого тега bold 700 italic, а один вообще поставить в шрифт Open sea?

Ну ровно так и делать, как вы написали.

p.one < font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; >p.two < font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-style: italic; >p.three

Как отметили выше, основное семейство шрифта лучше задать для всей страницы, в нужных местах менять только жирность и начертание.

Как осуществить подключение нескольких шрифтов в 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); /*И так далее. */ >

Как будет правильно?

  • Вопрос задан более трёх лет назад
  • 71412 просмотров

Комментировать
Решения вопроса 2

Zoxon

Веб-разработчик

@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; >

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *