Custom Fonts

Как вставить шрифт

Загрузите файлы шрифтов и скопируйте для использования в CSS.
Либо используйте Google Fonts и пропустите шаг

Вставьте CSS код из загруженных шрифтов или @import полученный из Google Fonts на вкладку CSS вставки кода в настройках проекта, страницы или HTML-элемента.

Пример:

/* При вставке кода через HTML элемент следует указать :scope {}, что бы стили ниже применялись ко всей странице */
:scope {}

/* Импортируйте необходимые шрифты с Google Fonts (Playpen Sans в данном случае) */
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans&display=swap');

/* Или загрузите их в раздел Настройки -> Шрифты, Скопируйте CSS код и вставьте в код (Formular в данном случае) 
*/
@font-face {
  font-family: "Formular";
  font-weight: 400;
  font-style: normal;
  src: url("/files/formular-regular.ttf") format("truetype"), url("/files/formular-regular.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Formular";
  font-weight: 700;
  font-style: normal;
  src: url("/files/formular-bold.woff") format("woff"), url("/files/formular-bold.ttf") format("truetype");
  font-display: swap;
}

Добавьте собственные классы для этих шрифтов. Значение font-family должно совпадать с описанными выше.
Обязательно укажите фоллбек на системные шрифты, например Arial, Helvetica, sans-serif. Эти шрифты будут использоваться пока загружается ваш шрифт.

Пример:


/* Назначьте шрифты своим классам */
.font-formular {
  font-family: "Formular", Arial, Helvetica, sans-serif;
  font-weight: 700;
  // Любые другие стили
}

.font-playpen-sans {
  font-family: "Playpen Sans", Arial, Helvetica, sans-serif;
}

Примените эти классы к элементам