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

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

  • автор:

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

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

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?

Как подключить два шрифта через 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.

Работа с шрифтами в CSS. Подключение кастомных шрифтов

Установка шрифта в CSS осуществляется с помощью свойства font-family . В качестве значения мы можем указать как один шрифт, так и несколько, перечислив их через запятую:

body { font-family: "Segoe UI", Arial, sans-serif; }

В этом примере мы для тега установили шрифты в следующем порядке:

  1. Segoe UI;
  2. Arial;
  3. sans-serif.

sans-serif — это не шрифт, а ключевое слово в CSS, с помощью которого мы указываем общее семейство шрифтов. В данном случае, семейство шрифтов без засечек. По факту оно будет обозначать шрифт, который установлен в браузере по умолчанию для этого семейства шрифтов.

В большинстве случаев указание нескольких шрифтов в font-family нужно лишь для того, чтобы улучшить качество отображения текста на различных устройствах. Так как не на каждом из них имеется тот или иной шрифт.

В этом случае сначала указывают самый желаемый шрифт, потом менее желаемый, и завершают этот список обычно общим типом шрифта. Чтение этого списка браузер выполняет слева направо до первого найденого шрифта. Таким образом, как только браузер обнаружит какой-то из перечисленных шрифтов, он его сразу же будет использовать. Продолжать идти дальше по списку и проверять оставшиеся шрифты он не будет.

В случае, когда ни один из заданных шрифтов не найден, будет использоваться тот, который указан в настройках браузера по умолчанию. В Chrome посмотреть, какой шрифт используется по умолчанию можно в разделе «Настроить шрифты»: «Настройки» -> «Внешний вид» -> «Настроить шрифты». Кстати, здесь же его при необходимости можно изменить на другой:

Настройка шрифтов в браузере Chrome

В настройках браузера можно изменить не только общий шрифт по умолчанию, но и шрифты для некоторых общих категорий шрифтов. В основном для serif , sans-serif и monospace . Изменить дефолтный шрифт для других семейств ( fantasy , cursive и так далее) в большинстве случаев нельзя.

Пример, как в очень популярном CSS-фреймворке Bootstrap 5 выполняется установка шрифта для тега и, следовательно, по умолчанию для всех вложенных в него элементов:

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

Шрифты, в названии которых имеется хотя один пробел, должны быть заключены в кавычки. Наприпер: «Segoe UI», «Helvetica Neue» и так далее.

В конце как правило после всех шрифтов необходимо указать их общее семейство. Так как нет гарантии, что эти шрифты имееются на устройстве пользователя. В этом случае хотя бы будет использоваться шрифт из этого семейства, а неизвестно какой. В этом примере как раз для этого случая указано семейство шрифтов sans-serif .

Кроме этого в начале указано ключевое слово system-ui . Какой шрифт оно обозначает? Чтобы это понять, рассмотрим какие вообще имеются основные ключевые слова, которые могут использоваться для указания общих семейств шрифтов:

  • system-ui – общее семейство системных шрифтов; оно указывает, что в качестве шрифта будет использоваться системный шрифт операционной системы, но так как разные операционные системы используют разные системные шрифты, то в Windows это будет «Segoe UI», в macOS – «San Francisco», в Android – «Roboto».
  • -apple-system – обозначает, что на устройствах Apple (iPhone, iPad и Mac) нужно использовать системный шрифт операционной системы.
  • serif – шрифт с засечками. Например: Georgia, Times New Roman.
  • sans-serif – шрифт без засечек. Например: Arial, Tahoma, Trebuchet MS, Verdana, San Francisco, Segoe UI.
  • monospace – моноширинный шрифт, то есть такой у которого все символы (глифы) имеют одинаковую ширину. Например: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New.
  • cursive – шрифты, имитирующие почерк. Например: Comic Sans MS, Comic Sans, Apple Chancery, Bradley Hand, Snell Roundhand.
  • fantasy – декоративные шрифты, которые в основном используются для названий, заголовков и так далее. Например: Impact, Luminari, Chalkduster, Jazz LET, Stencil Std.
  • emoji – шрифты, специально предназначенные для отображения эмодзи. Например: Apple Color Emoji, Segoe UI Emoji.

Свойство font-family является наследуемым. Это значит, что при его установке некоторому элеиенту, оно по цепочке вложенности передаётся всем его потомкам.

Наследование свойства font-family

Поэтому шрифт, который должен иметь основный текст на странице обычно устанавливают на уровне . А отдельным элементам, например, заголовкам .. задают его уже на уровне этих элементов:

body { font-family: Arial, sans-serif; } h1, h2, h3 { font-family: "Times New Roman", serif; }

Размер шрифта (font-size)

В CSS установка размера шрифта осуществляется с помощью свойства font-size .

Например, назначим для

размер шрифта, равный 18px:

p { font-size: 18px; }

Задавать размеры шрифта можно в различных единицах измерения:

  • px – в пикселях;
  • em – относительно размера шрифта родителя;
  • rem – относительно размера шрифта элемента ;
  • % – относительно размера шрифта родителя; аналогично em , только значение указывается в процентах;
  • vw , vh , vmin , vmax – относительно viewport;

Другие единицы измерения ( mm , cm , pt , pc ) сейчас практически не используются.

Кроме использования единиц измерения, задавать размер тексту можно ещё с помощью следующих ключевых слов:

  • xx-small (9px);
  • x-small (10px);
  • xx-small (13px);
  • medium – начальное значение font-size (обычно 16px);
  • large (18px);
  • x-large (24px);
  • xx-large (32px);
  • xxx-large (48px).

В скобках приведены значения для справки, чтобы понять, как эти ключевые слова соотносятся друг к другу. Точные из значения зависят от настроек браузера и операционной системы. На практике эти ключевые слова обычно не используют.

Кроме этих ключевых слов имеются ещё два: smaller и larger . Они позволяют сделать размер шрифта немного меньше или больше, чем у родителя.

Насыщенность шрифта (font-weight)

Установка насыщенности шрифту (толщины букв) в CSS осуществляется с помощью свойства font-weight :

/* установим жирный текст для всех элементов с классом title */ .title { font-weight: bold; }

Задать толщину тексту можно с помощью числа или ключевого слова. Список значений от самого тонкого до самого жирного начертания:

  • 100 – тонкое;
  • 200 – сверхсветлое;
  • 300 – светлое;
  • 400 или normal – стандартное (значение по умолчанию);
  • 500 – среднее;
  • 600 – полужирное;
  • 700 или bold – жирное;
  • 800 – сверхжирное;
  • 900 – тяжёлое.

Чтобы использовать все эти начертания, шрифт должен их поддерживать. В противном случае браузер будет использовать ближайшее начертание, которое этот шрифт имеет. Набиолее часто из всех значений используются два: normal и bold .

Например, установим заголовкам стандартное начертание текста:

h2 { font-weight: normal; }

На этом рисунке приведены начертания стандартного шрифта «Segoe UI» от 100 до 900.

Управление насыщенностью шрифта в CSS с помощью свойства font-weight

Как видите, от 100 до 300 этот шрифт имеет одинаковое начертание. Также оно не отличается в диапазонах: 500-600 и 800-900.

Например, установим заголовкам внутри .card среднюю толщину букв тексту:

.card h2 { font-weight: 500; }

Кроме абсолютных значений у font-weight имеются ещё относительные: lighter и bolder . С помощью них мы можем установить соотвественно более тонкое или толстое начертание шрифту, чем то, которое имеется у его родителя:

/* в элементах , расположенных непосредственно в 

, текст будет на один уровень меньше по жирности, чем у родительского элемента */ p > span { font-weight: lighter; }

На практике относительные значения bolder и lighter практически не используются.

Стиль шрифта (font-style)

С помощью свойства font-style мы можем установить начертание шрифта:

  • normal – обычное (значение по умолчанию);
  • italic – курсивное;
  • oblique – наклонное;
  • oblique 14deg – с указанием угла наклона текста.

При этом браузер сначала попытается найти данный стиль шрифта среди подключенных. Если его нет, то браузер синтезирует его самостоятельно.

Допустимые значения — это градусы от -90deg до 90deg включительно.

Подключение кастомных шрифтов

Для создания уникального дизайна сайта очень часто не хватает шрифтов, встроенных в операционную систему. Для загрузки и подключения нестандартных шрифтов в CSS существует директива @font-face . Но перед тем как её рассмотреть разберём ещё один очень важный момент.

По факту в font-family мы указываем не сам шрифт, а его семейство. Семейство – это полный набор стилей, а стиль – это отдельный и конкретный шрифт в этом семействе. Например, семейство «Roboto» состоит из следующих стилей (шрифтов):

Список шрифтов из которых состоит семейство шрифтов Roboto

Поэтому, когда браузер применяет стиль, ему нужно знать не только семейство, но и такие свойства как font-style (начертание) и font-weight (насыщенность).

Кроме этого, стоит отметить про новый шрифтовой формат — вариативные шрифты (variable fonts). До их появления каждый стиль реализовывался как отдельный файл шрифта. В случае вариативных шрифтов все стили могут содержаться в одном файле. Кроме этого, описание вариативных шрифтов может сопровождаться кроме font-style и font-weight ещё другими свойствами. Например, font-variant , font-stretch и так далее. Но эти шрифты не так популярны и в этой теме мы их рассматривать не будем.

Пример подключения шрифта «Roboto» к странице и установка его по умолчанию в качестве базового шрифта для сайта:

/* подключение шрифта Roboto */ @font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("/assets/fonts/roboto-regular.woff2") format("woff2"); } /* установка Roboto в качестве основного шрифта */ body { font-family: Roboto, sans-serif; }

Деректива @font-face должна обязательно содержать следующие два свойства:

  • font-family – семейство шрифтов, к которому относится этот вариант шрифта (при этом данное название необязательно должно соотвествовать настоящему имени шрифта);
  • src – один или несколько источников, из которых браузер может взять данный шрифт.

Свойство font-family нужно для того, чтобы мы могли потом использовать этот шрифт по данному имени. Как например, мы это сделали в .

В свойстве src источник можно определять с помощью функции local() и url() . Функция local() предназначена для поиска шрифта на устройстве пользователя по его имени, а url() – для загрузки шрифта из файла по указанному URL-адресу. Этот файл в данном формате должен быть доступен по указанному адресу.

Очень часто local() и url() используют вместе. Это позволяет, если доступен шрифт на устройстве поользователя, то использовать его. Если его нет, то загрузить его с сервера по указанному URL:

@font-face { font-family: "Roboto"; /* браузер сначала попробует найти шрифт на устройстве пользователя по имени Roboto */ src: local("Roboto"), /* если не получилось, то попробует найти его на устройстве пользователя по имени Roboto-Regular */ local("Roboto-Regular"), /* если не получилось, то загрузит его с сервера по указанному URL */ url("/assets/fonts/roboto-regular.woff2") format("woff2"); }

В этом примере с помощью format() мы указали формат этого шрифта. В данном случае «woff2» – Web Open Font Format. Данный формат поддерживают все современные браузеры. Использовать какие-то другие форматы не нужно. Но, если нужна поддержка старых браузеров, то тогда нужно добавить другие форматы шрифтов, которые они поддерживают. Например, woff, ttf или ещё какие-то другие:

@font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("/assets/fonts/roboto-regular.woff2") format("woff2"), /* если шрифт не доступен или не подерживается woff2, то загрузит woff */ url("/assets/fonts/roboto-regular.woff") format("woff"), /* если шрифт не доступен или не подерживается woff, то загрузит ttf */ url("/assets/fonts/roboto-regular.ttf") format("ttf"), }

Если мы хотим, чтобы текст был стилизован как жирный или курсив, но мы подключили только один вариант шрифта (например, для стандартного начертания), то браузеры могут компенсировать их отсутствие и создавать подобное начертание самостоятельно. При этом нужно понимать, что они будут делать так как могут и в разных браузерах результат может быть разным и не всегда то чего вы хотите.

Поэтому, чтобы этого избежать нам нужно для каждого стиля подключить свою версию шрифта с помощью @font-face . В этом случае браузер при отрисовке текста будет использовать соответствующую версию шрифта и текст будет отображаться так как нужно.

Например, для того чтобы браузер для отрисовки курсивного текста ( font-style: italic ) с насыщенностью 400 ( font-weight: 400 ) использовал соотвествующую версию шрифта нужно добавить ещё один @font-face :

/* шрифт Roboto для стандартного начертания */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(/assets/fonts/roboto-regular.woff2) format('woff2'); } /* шрифт Roboto для курсива */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local('Roboto Italic'), local('Roboto-Italic'), url(/assets/fonts/roboto-italic.woff2) format('woff2'); }

Допонительно в @font-face мы добавили свойства font-style и font-weight , чтобы браузер знал, какую версию шрифта нужно использовать в том или ином случае.

Если мы хотим, чтобы для жирного начертания браузер тоже использовал соотвествующую версию шрифта, то её также необходимо добавить с помощью @font-face к уже 2 имеющимся:

/* для жирного начертания */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(/assets/fonts/roboto-bold.woff2) format('woff2'); }

Подключение шрифтов с Google Fonts

Google Fonts – это бесплатный сервис, с помощью которого можно очень просто подключить на страницу нестандартный шрифт. Google Fonts содержит более 1500 семейств шрифтов и все они имеют открытый исходный код.

Наиболее популярными семействами на этом сервисе являются: Roboto, Open Sans, Noto Sans, Montseratt, Lato, Poppins, Inter, Oswald и так далее.

Для подключения шрифтов необходимо выбрать нужные семейства и в них одно или несколько необходимых начертаний:

Выбор необходимых начертаний в нужных семействах в бесплатном сервисе Google Fonts

После этого скопировать сгенерированный HTML-код и вставить его раздел :

Теперь выбранные шрифты можно использовать в свойстве font-family :

/* по умолчанию для основного текста */ body { font-family: 'Roboto', sans-serif; } /* для заголовков */ h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

Если перейти по ссылке, которую нам даёт Google Fonts, то мы увидим ничто иное как CSS-код, содержащий множество @font-face для подключения каждого конкретного выбранного варианта шрифта.

Содержимое URL-адреса, которую нам даёт Google Fonts

Из интересных свойств, которые мы ещё не рассматривали – это font-display и unicode-range .

Свойство font-display предназначено для настройки поведения текста на странице во время загрузки шрифта. Этому свойству можно установить одно из следующих значений:

  • auto – определяется браузером; в большинстве своём он близок к block ;
  • block – если в течение 3 секунд нужный шрифт не загрузился, браузер его покажет невидимым запасным шрифтом; после загрузки отображение текста будет переключено на него;
  • swap – если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после того как нужный шрифт будет загружен текст будет переключен на него;
  • fallback – если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после этого, если в течение 3 секунд нужный шрифт загрузился, то текст будет переключен на него; но если этого не произошло, текст останется на запасном шрифте;
  • optional – похож на fallback , но в отличие от него здесь период для замены 3 секунды не задан; поэтому решение переключать отображение текста или нет на нужный шрифт остаётся за браузером.

Свойство unicode-range позволяет указать диапазон символов Unicode, которые необходимо загрузить из шрифта. То есть с помощью него мы можем уменьшить количество загружаемых данных, так как из шрифта будут загружаться только те символы, которые действительно нужны.

Например, такой диапазон символов Unicode используется в Google Fonts для поддержки кириллицы:

/* киррилица */ font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

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

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