Заменить предустановленные шрифты на свои в АСПРО

Общие

16.11.2024

Оформите заявку на сайте, мы свяжемся с вами в ближайшее время и ответим на все интересующие вопросы.

1. Подключение шрифта

Если шрифт доступен в виде файла (например, Molot.woff2), вы можете подключить его через CSS. Если он размещен на стороннем сервисе (например, Google Fonts), вы подключаете его через ссылку.

Вариант 1: Локальный файл

Сохраните файл шрифта Molot.woff2 в директорию, например, /fonts/.

Добавьте шрифт в ваш CSS-файл:

css Скопировать
Закрыть блок

@font-face {
   font-family: 'Molot';
   src: url('/fonts/Molot.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
}

h1 {
   font-family: 'Molot', sans-serif; /* 'sans-serif' будет запасным шрифтом */
}

Вариант 2: Использование шрифта с сервера

Если шрифт размещен на сервере или в CDN:

Подключите шрифт в <head> вашего HTML:
html Скопировать
Закрыть блок
```
<link rel="stylesheet" href="https://example.com/fonts/molot.css">
```
В вашем CSS-файле:
css Скопировать
Закрыть блок
```
h1 {
   font-family: 'Molot', sans-serif;
}
```

2. Принудительное применение шрифта (главенство Molot)

Чтобы шрифт Molot имел высший приоритет, добавьте правило с !important в CSS:

css Скопировать
Закрыть блок

h1 {
    font-family: 'Molot', sans-serif !important;
}

Это правило перезапишет любые другие стили для тега <h1>, даже если они уже определены.

Итоговый пример HTML + CSS

HTML:

html Скопировать
Закрыть блок

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Шрифт Molot</title>
    <!-- Локальный или внешний файл шрифта -->
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>Заголовок с Molot</h1>
</body>
</html>

CSS:

css Скопировать
Закрыть блок

@font-face {
    font-family: 'Molot';
    src: url('/fonts/Molot.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'Molot', sans-serif !important;
}

Этот подход обеспечит правильное отображение шрифта Molot для всех <h1> на вашем сайте.

P.S. Править надо именно bitrix/templates/aspro-lite/css/custom.css

Назад к списку

Наши специалисты ответят на любой интересующий вопрос

Задать вопрос

Главная Каталог Контакты Услуги FAQ Компания Проекты Сертификаты Битрикс