Добавить шрифты в настройки темы на основе Barrio

Опубликовано Elena Ivleva - ср, 08/12/2020 - 20:18

Итак, тема Barrio предлагает нам несколько вариантов выбора для шрифтов основного текста и заголовков.

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

Процесс неплохо описан в официальной документации, поэтому мой урок является переводом источника.

На ресурсе google fonts  я выбрала шрифт Montserrat для названия сайта и заголовков. Для остального теста я решила использовать  Fira Sans.

В папке с темой я начну с файла stud2020.theme.

Здесь меня интересует функция:

function stud2020_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {
  $form['components']['navbar']['bootstrap_barrio_navbar_top_background']['#options'] = [
    'bg-primary' => t('Primary'),
    'bg-secondary' => t('Secondary'),
    'bg-light' => t('Light'),
    'bg-dark' => t('Dark'),
    'bg-white' => t('White'),
    'bg-transparent' => t('Transparent'),
  ];
  $form['components']['navbar']['bootstrap_barrio_navbar_background']['#options'] = [
    'bg-primary' => t('Primary'),
    'bg-secondary' => t('Secondary'),
    'bg-light' => t('Light'),
    'bg-dark' => t('Dark'),
    'bg-white' => t('White'),
    'bg-transparent' => t('Transparent'),
  ];
}

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

$form['fonts']['fonts']['bootstrap_barrio_google_fonts']['#options']['monserrat_fira_sans'] = 'Montserrat Light, Fira Sans';

А после еще целую функцию:

function stud2020_preprocess_page(&$variables)
{
  $fonts = theme_get_setting('bootstrap_barrio_google_fonts');
  if ($fonts) {
    $variables['#attached']['library'][] = ( $fonts == 'monserrat_fira_sans' ? 'stud2020' : 'bootstrap_barrio' ) . '/' . $fonts;
  }
}

Обратите внимание на имя переменной monserrat_fira_sans и имя темы stud2020. У вас это будут собственные значения.

Теперь в папке темы я открываю файл stud2020.libraries.yml и добавляю раздел #Fonts для подключения шрифтов. В файлах yml пробелы и пустые строки имеют важное значение, поэтому будьте внимательны. Я добавила #Fonts после раздела color:

 dependencies:
    - color/drupal.color

# Fonts

monserrat_fira_sans:
  version: VERSION
  css:
    component:
      fonts/monserrat_fira_sans.css: {}
      //fonts.googleapis.com/css?family=Montserrat:400|Fira+Sans:400,400italic,700italic,700: {} 

Обратите внимание на имя переменной и на синтаксис подключения шрифтов с разными начертаниями и пробелами в названиях.

И последним этапом создаем в папке с темой папку fonts, а в ней файл monserrat_fira_sans.css, что соответствует имени нашей переменной, и в этом файле указываем стили для заголовков и текста.

Пример моего файла:

h1,
h2,
h1 a,
h2 a {
  font-family: 'Montserrat', sans-serif;
}
h1,
h1 a {
  font-family: 'Montserrat', sans-serif;
}
h2,
h2 a {
  font-family: 'Montserrat', sans-serif;;
}
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
}
h3,
h3 a {
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
}
body,
p,
a,
li {
  font-family: 'Fira Sans', sans-serif;
}

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

Настройка шрифтов в теме Barrio

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

PayPal

ЮMoney