Как менять размер шрифта в css

Размер шрифта в CSS

Давайте научимся менять размер шрифта. Для этого предназначено свойство font-size , принимающее значение в пикселях.

Давайте зададим тексту абзаца шрифт в 30 пикселей:

This is a paragraph with text.

p < font-size: 30px; >

Скопируйте следующий HTML код себе на страницу:

Main page title

This is a paragraph with text.

Secondary heading 1

This is a paragraph with text.

This is a paragraph with text.

Secondary heading 2

This is a paragraph with text.

This is a paragraph with text.

Установите заголовку h1 размер шрифта в 50px и выравнивание по центру, заголовкам h2 размер шрифта в 40px и отмените жирность, а абзацам установите шрифт в 30px .

Типографика

Документация и примеры типографики Bootstrap, включая глобальные настройки, заголовки, текст документа, списки и т.д.

На этой странице

Глобальные настройки

Bootstrap предустанавливает глобальные стили отображения, типографии и ссылок. Когда нужно настроить больше элементов, проверьте наши классы текстовых утилит.

• Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов font-family для всех ОС и девайсов.
• Для более широкой и доступной шкалы шрифтов используется шрифт браузера по умолчанию font-size (обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера.
• Используйте атрибуты $font-family-base , $font-size-base и $line-height-base как типографическую базу для .
• Задавайте глобальные цвета ссылок через $link-color и применяйте подчеркивание ссылок только в :hover .
• Используйте $body-bg для задания background-color для (по умолчанию стоит #fff ).

Эти стили находятся в _reboot.scss , а глобальные переменные определены в _variables.scss . Задавайте $font-size-base в rem .

Заголовки

Доступны все HTML-заголовки от до .

Заголовок	Пример
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading

h1>h1. Bootstrap headingh1> h2>h2. Bootstrap headingh2> h3>h3. Bootstrap headingh3> h4>h4. Bootstrap headingh4> h5>h5. Bootstrap headingh5> h6>h6. Bootstrap headingh6>

Если вы хотите, чтобы стилизация шрифта совпадала с заголовком, но не можете использовать соотнесенный HTML-элемент, классы .h1 — .h6 также доступны.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

p class="h1">h1. Bootstrap headingp> p class="h2">h2. Bootstrap headingp> p class="h3">h3. Bootstrap headingp> p class="h4">h4. Bootstrap headingp> p class="h5">h5. Bootstrap headingp> p class="h6">h6. Bootstrap headingp>

Настройка заголовков

Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.

Заголовок отображения С выцветшим «второстепенным» текстом

h3> Заголовок отображения small class="text-muted">С выцветшим "второстепенным" текстомsmall> h3>

Отображение заголовков

Традиционные заголовки созданы для «работы» «в глубине» вашей страницы. Если вам необходимо выделить заголовок, используйте отображение заголовков — большего размера, слегка более вычурный.

Отображение 1
Отображение 2
Отображение 3
Отображение 4
Отображение 5
Отображение 6

h1 class="display-1">Отображение 1h1> h1 class="display-2">Отображение 2h1> h1 class="display-3">Отображение 3h1> h1 class="display-4">Отображение 4h1> h1 class="display-5">Отображение 5h1> h1 class="display-6">Отображение 6h1> 

Отображаемые заголовки настраиваются с помощью карты Sass $display-font-sizes и двух переменных: $display-font-weight и $display-line-height .

$display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-weight: 300; $display-line-height: $headings-line-height; 

«Лид»

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead .

Это ведущий абзац. Он выделяется из обычных абзацев.

p class="lead"> Это ведущий абзац. Он выделяется из обычных абзацев. p>

Строчные текстовые элементы

Стили для обычных блочных элементов HTML5.

Тег-выделитель для подсветки текста.

Мелкий шрифт (типа нижний индекс)

Жирный текст.

p>Тег-выделитель для mark>подсветкиmark> текста.p> p>del>Удаленный текст.del>p> p>s>Зачеркнутый.s>p> p>ins>Строка - дополнение к документу.ins>p> p>u>Подчеркнутый текстu>p> p>small>Мелкий шрифт (типа нижний индекс).small>p> p>strong>Жирный текст.strong>p> p>em>Курсив.em>p>

Помните, что эти теги должны использоваться в семантических целях:

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

Если Вы хотите стилизовать свой текст, Вы должны вместо этого использовать следующие классы:

• .mark будут применять те же стили, что и .
• .small будут применять те же стили, что и .
• .text-decoration-underline будут применять те же стили, что и .
• .text-decoration-line-through будут применять те же стили, что и .

Можете свободно использовать теги и в HTML5. создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а выделяет цитаты, прямую речь, термины и т.д.

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Реализация элемента нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.

p>abbr title="attribute">attrabbr>p> p>abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

Цитаты

Для цитат с другого источника в вашем документе. Оберните любой элемент в для создания цитаты.

A well-known quote, contained in a blockquote element.

blockquote class="blockquote"> p>A well-known quote, contained in a blockquote element.p> blockquote>

Наименование источника

Спецификация HTML требует, чтобы атрибуты наименования источника размещалась за пределами тега . При использовании атрибуции оберните ваш в и используйте элемент или уровень блока (например,

) с классом .blockquote-footer . Не забудьте также обернуть название исходной работы в .

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

figure> blockquote class="blockquote"> p>A well-known quote, contained in a blockquote element.p> blockquote> figcaption class="blockquote-footer"> Someone famous in cite title="Source Title">Source Titlecite> figcaption> figure>

Выравнивание

Используйте текстовые утилиты для изменения параметров выравнивания блока цитат.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

figure class="text-center"> blockquote class="blockquote"> p>A well-known quote, contained in a blockquote element.p> blockquote> figcaption class="blockquote-footer"> Someone famous in cite title="Source Title">Source Titlecite> figcaption> figure>

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

figure class="text-end"> blockquote class="blockquote"> p>A well-known quote, contained in a blockquote element.p> blockquote> figcaption class="blockquote-footer"> Someone famous in cite title="Source Title">Source Titlecite> figcaption> figure>

Списки

Без элементов стилизации

Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.

• This is a list.
• It appears completely unstyled.
• Structurally, it’s still a list.
• However, this style only applies to immediate child elements.
• Nested lists:
  • are unaffected by this style
  • will still show a bullet
  • and have appropriate left margin

  ul class="list-unstyled"> li>This is a list.li> li>It appears completely unstyled.li> li>Structurally, it's still a list.li> li>However, this style only applies to immediate child elements.li> li>Nested lists: ul> li>are unaffected by this styleli> li>will still show a bulletli> li>and have appropriate left marginli> ul> li> li>This may still come in handy in some situations.li> ul>

  В линию

  Удалены маркеры из списка и левый марджин margin с комбинацией двух классов: .list-inline и .list-inline-item .

  • This is a list item.
  • And another one.
  • But they’re displayed inline.

  ul class="list-inline"> li class="list-inline-item">This is a list item.li> li class="list-inline-item">And another one.li> li class="list-inline-item">But they're displayed inline.li> ul>

  Описание и выравнивание

  Для выравнивания по горизонтали используйте предопределенные классы нашей системы сетки (или семантические миксины). Для более длинного контента вы можете дополнительно добавить класс .text-truncate , чтобы обрезать текст с добавлением многоточия.

  Списки описаний Список описаний идеально подходит для определения терминов. Термин

  И еще немного текста определения заполнителя.

  Другой термин Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще. Усеченный термин усечен Это может быть полезно, когда места мало. Добавляет многоточие в конце. Вложенность Список вложенных определений Я слышал, Вам нравятся списки определений. Позвольте мне поместить список определений в Ваш список определений.

  dl class="row"> dt class="col-sm-3">Списки описанийdt> dd class="col-sm-9">Список описаний идеально подходит для определения терминов.dd> dt class="col-sm-3">Терминdt> dd class="col-sm-9"> p>Определение термина.p> p>И еще немного текста определения заполнителя.p> dd> dt class="col-sm-3">Другой терминdt> dd class="col-sm-9">Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще.dd> dt class="col-sm-3 text-truncate">Усеченный термин усеченdt> dd class="col-sm-9">Это может быть полезно, когда места мало. Добавляет многоточие в конце.dd> dt class="col-sm-3">Вложенностьdt> dd class="col-sm-9"> dl class="row"> dt class="col-sm-4">Список вложенных определенийdt> dd class="col-sm-8">Я слышал, Вам нравятся списки определений. Позвольте мне поместить список определений в Ваш список определений.dd> dl> dd> dl>

  Адаптивные размеры шрифта

  В Bootstrap 5 мы включили адаптивные размеры шрифтов по умолчанию, что позволяет тексту более естественно масштабироваться в зависимости от размеров устройства и области просмотра. Загляните на страницу RFS чтобы узнать, как это работает.

  Sass

  Переменные

  В заголовках есть несколько переменных, определяющих размер и интервал.

  $headings-margin-bottom: $spacer * .5; $headings-font-family: null; $headings-font-style: null; $headings-font-weight: 500; $headings-line-height: 1.2; $headings-color: null; 

  Различные элементы типографики, описанные здесь и в Reboot, также имеют специальные переменные.

  $lead-font-size: $font-size-base * 1.25; $lead-font-weight: 300; $small-font-size: .875em; $sub-sup-font-size: .75em; $text-muted: $gray-600; $initialism-font-size: $small-font-size; $blockquote-margin-y: $spacer; $blockquote-font-size: $font-size-base * 1.25; $blockquote-footer-color: $gray-600; $blockquote-footer-font-size: $small-font-size; $hr-margin-y: $spacer; $hr-color: inherit; $hr-height: $border-width; $hr-opacity: .25; $legend-margin-bottom: .5rem; $legend-font-size: 1.5rem; $legend-font-weight: null; $mark-padding: .2em; $dt-font-weight: $font-weight-bold; $nested-kbd-font-weight: $font-weight-bold; $list-inline-padding: .5rem; $mark-bg: #fcf8e3; 

  Миксины

  Специальных миксинов для типографики нет, но Bootstrap действительно использует Адаптивный размер шрифта (RFS).

  Как задать ширину текста в css

  В прошлой теме мы рассмотрели установку шрифтов для текста. В этой теме мы рассмотрим, как изменить размер текста в CSS, сделать текст жирным и установить другие свойства текстовых элементов.

  Стиль, вариант, ширина и размер текста

  Для установки размера текста используется свойство font-size . Размер указывается в любых доступных в CSS единицах. Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно много, вы можете найти их в справочниках. Использовать их неудобно, обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер текста:

  Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство font-style . Оно может принимать следующие значения:

  font-style: normal — обычный шрифт (по умолчанию)

  font-style: italic — курсивный шрифт

  font-style: oblique — наклонный шрифт

  font-style: inherit — значение принимается от родительского элемента

  У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному.

  Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style :

  Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного размера. Для этого используется свойство font-variant . Оно принимает следующие значения:

  font-variant: normal — нормальный шрифт (по умолчанию)

  font-variant: small-caps — прописные буквы выглядят как заглавные

  font-variant: inherit — значение принимается от родительского элемента

  Добавим селектору #fo свойство font-variant :

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

  font-weight: normal — обычный текст

  font-weight: bold — жирный текст

  font-weight: inherit — принимает значение от родительского элемента

  Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal , а число 700 значению bold . Но числа работают не со всеми шрифтами, а также они не работают в некоторых браузерах, поэтому они редко используются.

  Добавим селектору #fo свойство font-weight :

  Существует совойство font , в котором можно указать все перечисленные свойства, а также шрифт. Значения свойств перечисляются через пробел в таком порядке: стиль, вариант, ширина, размер, шрифт. Для примера добавим на страницу тэг и установим для него свойство font :

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

  Цвет текста

  Цвет текста устанавливается с помощью свойства color . Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS. Для примера установим цвет тэгу , который мы создавали ранее. Добавим селектору #s2 свойство color :

  Высота строки

  Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство line-height . Оно устанавлявает высоту строки. Высота строки состоит из размера шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей, то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то строки будут пересекаться. Свойство line-height может принимать такие значения:

  line-height: normal — обычный интервал (по умолчанию)

  line-height: число, на которое будет умножен размер шрифта

  line-height: высота в единицах измерения, доступных в CSS

  line-height: проценты от размера шрифта

  line-height: inherit значение принимается от родительского элемента

  Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта и высоту строки:

  Попробуйте разные варианты высоты строки. Посмотрите как будет выглядеть текст.

  Отступ первой строки

  В абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для установки этого отступа есть свойство text-indent . Значением этого свойства является отступ в единицах измерения, существующих в CSS.

  Установим отступ большому абзацу. Для этого селектору #text добавим свойство text-indent :

  Выравнивание текста

  Выравнивание текста устанавливается с помощью свойства text-align . Оно принимает следующие значения:

  text-align: left — по левому краю (по умолчанию)

  text-align: right — по правому краю

  text-align: center — по центру

  text-align: justify — по ширине. Используется для текстов длинной более одной строки.

  Добавим на страницу абзац и выравнем текст в нём по центру. Обратите внимание — выравнивается не сам элемент а текст внутри него:

  Декорирование текста

  Декорирование — это оформление текста определённым образом. Оно устанавливается с помощью свойства text-decoration . Оно принимает такие значения:

  text-decoration: none — без декорирования

  text-decoration: underline — подчёркнутый текст

  text-decoration: overline — надчёркнутый текст

  text-decoration: line-through — зачёркнутый текст

  text-decoration: inherit — значение принимается от родительского элемента

  Меняем размер текста CSS-стилями

  Добавляя на страницы сайта какой-то текст, мы обязательно сталкиваемся с необходимостью оформления текста в соответствии с общим дизайном. Одним из основных параметров, влияющих на читабельность и восприятие текста, является его размер.

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

  Навигация по статье:

  Как изменить размер текста CSS-стилями

  Для изменения параметров в таблице стилей css существует специализированное свойство font-size, используя которое можно задать размер текста css-стилями в любых, удобных для вас единицах измерения. При этом можно использовать абсолютные и относительные единицу измерения.

  Размер текста CSS

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

  К таким единицам измерения относятся:

  Кроме этого можно использовать ключевые слова:

  При использовании относительных единиц, таких как: %, em, rem, размер шрифта в CSS будет рассчитываться относительно родительского элемента.

  То есть при изменении шрифта родительского элемента шрифт в блоке будет так же увеличиваться или уменьшаться.

  Также расчёт размера шрифта может осуществляться относительно ширины или высоты области просмотра.

  Для этого можно воспользоваться такими единицами измерения как:

  • 1vw – 1% от ширины области просмотра
  • 1vh – 1% от высоты области просмотра
  • 1vmin — 1% от меньшей стороны окна браузера
  • 1vmax — 1% от большей стороны окна браузера

  Кроме того, так же можно указать размер шрифта CSS ключевым словом в относительном выражении: larger, smaller.

  При использовании такого CSS-свойства шрифт будет более крупным чем в родительском блоке.

  При использовании smaller – шрифт будет меньше чем родительском блоке.

  Как изменить размер текста в HTML

  Если вам нужно выделить одно слово или фрагмент текста, то, конечно же, это проще всего сделать в html-коде, используя атрибут style.

  Вот так это будет выглядеть на примере:

  Меняем размер шрифта в CSS

  Теперь, зная возможности данного css-свойства, вы можете использовать его в зависимости от ситуации, и добиться именно того результата, который вам нужен.

  Например, относительными единицами можно воспользоваться при адаптации под мобильные устройства, и текст будет уменьшаться при уменьшении ширины экрана. Это намного удобнее, чем для разных разрешений задавать размер шрифта css-свойствами в пикселях.

  

  На этом я, пожалуй, сегодня закончу. Если вам что-то не понятно или у вас остались вопросы, не стесняйтесь и задавайте их в комментариях.

  Не забудьте поделиться статьей в социальных сетях и подписаться на мою рассылку. Увидимся в следующих статьях!

  Оформление текста в CSS

  Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.

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

  CSS предоставляет довольно обширные возможности, позволяющие кардинально изменить внешний вид вашего текста с помощью различных цветовых решений, размера строки и т.д.

  Визуальное оформление текста в CSS

  В CSS оформление текста осуществляется с помощью параметра text-decoration , который может принимать следующие значения:

  • blink — мерцающий текст;
  • none — значение по умолчанию, оформление отсутствует;
  • overline — линия расположена над текстом;
  • underline — подчеркнутый линией текст;
  • line-through — текст, зачеркнутый линией;
  • inherit — в данном случае text-decoration наследует значение родительского элемента.

  В окне браузера данный пример будет выглядеть следующим образом:

  

  Цвет текста в CSS

  Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color .

  Способы задания могут быть следующими:

  • При помощи названия цвета (например, red, green, blue, white);
  • При помощи значения RGB (например, rgb(221,102,212));
  • При помощи шестнадцатеричного цветового значения (например, #ff00aa).

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

  

  Размер текста в CSS

  CSS свойство font-size позволяет задать размер текста.

  Единицами измерения могут быть:

  • Пиксели (например, 14px);
  • Пункты (например, 20pt);
  • Проценты (например, 50%);
  • Ключевые слова small, large и т.п.

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

  

  Отступ текста в CSS

  Изначальная концепция HTML не предполагала отступы, выделяя абзацы лишь вертикальным расстоянием, а множество пробелов перед строкой браузер преобразует в один.

  Однако в CSS данная проблема решается с помощью свойства text-indent .

  Визуальное отображение кода:

  

  Жирный и наклонный текст в CSS

  С помощью атрибута CSS font-weight определяется жирность шрифта.

  Данный атрибут может принимать следующие значения:

  • normal — обычный;
  • lighter — более светлый;
  • bold — жирный;
  • от 100 до 900, где 100 — самый тонкий шрифт, а 900 — самый толстый.

  В браузере данный код выглядит следующим образом:

  

  Тень текста в CSS

  CSS свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.

  В том случае, если цвет тени не задан, используется цвет текста.

  Представленный выше код в браузере выглядит следующим образом:

  

  Выравнивание текста в CSS

  Выравнивание текста по горизонтали задаётся свойством text-align , которое может принимать следующие значения:

  • left — выравнивание по левому краю;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по всей ширине.

  С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

  Данное свойство может принимать следующие значения:

  • baseline — выравнивание линии элемента по базовой линии родительского элемента;
  • middle — выравнивание средней элементной точки по базовой линии родительского элемента;
  • text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
  • top — выравнивание верха элемента по верхней части самого высокого элемента строки;
  • sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

  

  Таким образом, возможности CSS позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.

  Похожие публикации:

  1. Входная строка имела неверный формат как исправить
  2. Где находится маркер bfdi
  3. Исполнитель калькулятор преобразует число на экране у исполнителя есть три команды которым присвоены
  4. К пружинным весам подвешен блок через блок перекинут шнур к концам которого привязали грузы массой

  Настройка шрифтов для сайта

  Шрифты задаются в настройках сайта. Это значит, что параметры (гарнитура, насыщенность, размер, цвет) будут применятся глобально: ко всем блокам на всех страницах сайта. Таким образом поддерживается общий стиль и аккуратность.

  Чтобы перейти к настройке шрифтов сайта, перейдите в Настройки сайта → Шрифты и цвета.

  

  Вы увидите галерею шрифтов. Ее можно пролистать и задать шрифт для сайта, нажав на кнопку «Выбрать». Шрифт будет назначен для заголовков и для текста.

  Если вы хотите использовать сторонний шрифт или использовать разные шрифты для заголовка и текста, то нажмите на кнопку «Расширенные настройки».

  

  На вкладке Библиотека вы можете выбрать разные шрифты для заголовков сайта и для основного текста. В коллекции находятся более 20 стандартных и премиум-шрифтов от партнеров, которые предоставляются бесплатно при подписке на Тильду.

  

  На вкладках Google Fonts, Adobe Fonts и Загрузить шрифт вы можете загрузить шрифт из внешнего источника. Прочитайте подробные статьи ниже:

  Коллекция бесплатных шрифтов от Google
  Перейти к инструкции
  Абсолютно любой шрифт в форматах .woff и .woff2
  Перейти к инструкции
  Большая библиотека компании Adobe
  Перейти к инструкции
  Добавление ссылки на CSS-файл на стороннем сервере
  Перейти к инструкции
  Установка размеров и шрифтов заголовка и текста сайта

  Внизу настроек установки шрифта на вкладке «Шрифты и цвета» располагаются настройки стандартного размера, насыщенности и цвета заголовков и текста. Данные параметры устанавливаются глобально ко всем стандартным блокам на сайте, если в них жестко не установлены другие настройки шрифтов.

  

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

  Установка параметров шрифтов через панель настройки текста в редакторе
  Установка параметров текстовых элементов через настройки блока → Типографика
  Настройки подгрузки шрифтов

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

  В настройках сайта → Шрифты и цвета → Продвинутые настройки вы можете установить настройку показа системного шрифта при загрузке, чтобы текст показывался сразу, но сначала системным шрифтом, а потом тем, который вы выбрали. Это может вызывать короткое мерцание текста и изменение размера текстовых элементов, поэтому используйте эту настройку только если уверены, что так ваш сайт выглядит лучше при загрузке.

  Читать:

  Как установить zet 9 на mac os