Как добавлять Google Fonts в Divi

ВОПРОС:

Google Fonts

Нам надо научиться в Divi прописывать новые шрифты Google Fonts в CSS.

Причем, чтобы это было:

- просто при разворачивании клиентского проекта

- не слетало при обновлениях, как Divi, так и нашей Child темы.

- еще лучше, чтобы этот шрифт добавлялся в саму библиотеку Divi, как родной.

Вот что полезного нашел:

https://elegantmarketplace.com/how-to-add-google-fonts-to-divi/

http://www.divithemeexamples.com/add-how-to-add-google-fonts-to-your-divi-theme/

Посмотри, пожалуйста, как это можно реализовать. Для примера, давай на сайт migbusiness.ru добавим шрифт https://fonts.google.com/specimen/Montserrat. Его использовали для дизайна визиток, лого и тд. https://drive.google.com/drive/folders/0B9DL_UrdMcc5MVFsYTZVdHl1TkU?usp=sharing

А затем, перенесем уже на процессы по созданию клиентских сайтов.

ОТВЕТ:

Порылась в коде и обнаружила, что оказывается, в диви прописано несколько десятков гугл шрифтов. Уже прописано в коде, а значит добавлять их не нужно.
Возник вопрос, почему их не видно, раз они подключены. Может, где-то есть волшебная кнопка enable или activate?
В статьях по теме нет ничего об этом, все пишут, что шрифтов, мол, и так уже много, но если вдруг вам нужно еще больше, то... и дальше описываются нехитрые операции по подключению шрифтов к вордпресс.

А потом меня осенило Я переключила язык сайта на английский и - вуаля - в кастомайзере появилась целая куча гугл шрифтов. В том числе, и Montserrat.
Я упражнялась на staging-версии dbm01.

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

Проверила на английском тексте, все шрифты, которые подключены к диви, работают. Т.е. можно смело задавать в стилях что-то типа: "font-family: 'Montserrat', sans-serif;" и это будет работать. ВАЖНО: урезанный список шрифтов показывается только в кастомайзере (Настройщик темы). В настройках дизайна отдельных модулей виден как раз полный список шрифтов. Скриншот прилагаю.

1. Вот список всех шрифтов, по умолчанию подключенных к диви:
2. 1. 'Abel' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'sans-serif',
      ),
      'Amatic SC' => array(
      'styles' => '400,700',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Arimo' => array(
      'styles' => '400,400italic,700italic,700',
      'character_set' => 'latin,cyrillic-ext,latin-ext,greek-ext,cyrillic,greek,vietnamese',
      'type' => 'sans-serif',
      ),
      'Arvo' => array(
      'styles' => '400,400italic,700,700italic',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Bevan' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Bitter' => array(
      'styles' => '400,400italic,700',
      'character_set' => 'latin,latin-ext',
      'type' => 'serif',
      ),
      'Black Ops One' => array(
      'styles' => '400',
      'character_set' => 'latin,latin-ext',
      'type' => 'cursive',
      ),
      'Boogaloo' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Bree Serif' => array(
      'styles' => '400',
      'character_set' => 'latin,latin-ext',
      'type' => 'serif',
      ),
      'Calligraffitti' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Cantata One' => array(
      'styles' => '400',
      'character_set' => 'latin,latin-ext',
      'type' => 'serif',
      ),
      'Cardo' => array(
      'styles' => '400,400italic,700',
      'character_set' => 'latin,greek-ext,greek,latin-ext',
      'type' => 'serif',
      ),
      'Changa One' => array(
      'styles' => '400,400italic',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Cherry Cream Soda' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Chewy' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Comfortaa' => array(
      'styles' => '400,300,700',
      'character_set' => 'latin,cyrillic-ext,greek,latin-ext,cyrillic',
      'type' => 'cursive',
      ),
      'Coming Soon' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Covered By Your Grace' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Crafty Girls' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Crete Round' => array(
      'styles' => '400,400italic',
      'character_set' => 'latin,latin-ext',
      'type' => 'serif',
      ),
      'Crimson Text' => array(
      'styles' => '400,400italic,600,600italic,700,700italic',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Cuprum' => array(
      'styles' => '400,400italic,700italic,700',
      'character_set' => 'latin,latin-ext,cyrillic',
      'type' => 'sans-serif',
      ),
      'Dancing Script' => array(
      'styles' => '400,700',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Dosis' => array(
      'styles' => '400,200,300,500,600,700,800',
      'character_set' => 'latin,latin-ext',
      'type' => 'sans-serif',
      ),
      'Droid Sans' => array(
      'styles' => '400,700',
      'character_set' => 'latin',
      'type' => 'sans-serif',
      ),
      'Droid Serif' => array(
      'styles' => '400,400italic,700,700italic',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Francois One' => array(
      'styles' => '400',
      'character_set' => 'latin,latin-ext',
      'type' => 'sans-serif',
      ),
      'Fredoka One' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'The Girl Next Door' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Gloria Hallelujah' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Happy Monkey' => array(
      'styles' => '400',
      'character_set' => 'latin,latin-ext',
      'type' => 'cursive',
      ),
      'Indie Flower' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Josefin Slab' => array(
      'styles' => '400,100,100italic,300,300italic,400italic,600,700,700italic,600italic',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Judson' => array(
      'styles' => '400,400italic,700',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Kreon' => array(
      'styles' => '400,300,700',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Lato' => array(
      'styles' => '400,100,100italic,300,300italic,400italic,700,700italic,900,900italic',
      'character_set' => 'latin',
      'type' => 'sans-serif',
      ),
      'Lato Light' => array(
      'parent_font' => 'Lato',
      'styles' => '300',
      ),
      'Leckerli One' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Lobster' => array(
      'styles' => '400',
      'character_set' => 'latin,cyrillic-ext,latin-ext,cyrillic',
      'type' => 'cursive',
      ),
      'Lobster Two' => array(
      'styles' => '400,400italic,700,700italic',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Lora' => array(
      'styles' => '400,400italic,700,700italic',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Luckiest Guy' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Merriweather' => array(
      'styles' => '400,300,900,700',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Metamorphous' => array(
      'styles' => '400',
      'character_set' => 'latin,latin-ext',
      'type' => 'cursive',
      ),
      'Montserrat' => array(
      'styles' => '400,700',
      'character_set' => 'latin',
      'type' => 'sans-serif',
      ),
      'Noticia Text' => array(
      'styles' => '400,400italic,700,700italic',
      'character_set' => 'latin,vietnamese,latin-ext',
      'type' => 'serif',
      ),
      'Nova Square' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Nunito' => array(
      'styles' => '400,300,700',
      'character_set' => 'latin',
      'type' => 'sans-serif',
      ),
      'Old Standard TT' => array(
      'styles' => '400,400italic,700',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Open Sans' => array(
      'styles' => '300italic,400italic,600italic,700italic,800italic,400,300,600,700,800',
      'character_set' => 'latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic',
      'type' => 'sans-serif',
      ),
      'Open Sans Condensed' => array(
      'styles' => '300,300italic,700',
      'character_set' => 'latin,cyrillic-ext,latin-ext,greek-ext,greek,vietnamese,cyrillic',
      'type' => 'sans-serif',
      ),
      'Open Sans Light' => array(
      'parent_font' => 'Open Sans',
      'styles' => '300',
      ),
      'Oswald' => array(
      'styles' => '400,300,700',
      'character_set' => 'latin,latin-ext',
      'type' => 'sans-serif',
      ),
      'Pacifico' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Passion One' => array(
      'styles' => '400,700,900',
      'character_set' => 'latin,latin-ext',
      'type' => 'cursive',
      ),
      'Patrick Hand' => array(
      'styles' => '400',
      'character_set' => 'latin,vietnamese,latin-ext',
      'type' => 'cursive',
      ),
      'Permanent Marker' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Play' => array(
      'styles' => '400,700',
      'character_set' => 'latin,cyrillic-ext,cyrillic,greek-ext,greek,latin-ext',
      'type' => 'sans-serif',
      ),
      'Playfair Display' => array(
      'styles' => '400,400italic,700,700italic,900italic,900',
      'character_set' => 'latin,latin-ext,cyrillic',
      'type' => 'serif',
      ),
      'Poiret One' => array(
      'styles' => '400',
      'character_set' => 'latin,latin-ext,cyrillic',
      'type' => 'cursive',
      ),
      'PT Sans' => array(
      'styles' => '400,400italic,700,700italic',
      'character_set' => 'latin,latin-ext,cyrillic',
      'type' => 'sans-serif',
      ),
      'PT Sans Narrow' => array(
      'styles' => '400,700',
      'character_set' => 'latin,latin-ext,cyrillic',
      'type' => 'sans-serif',
      ),
      'PT Serif' => array(
      'styles' => '400,400italic,700,700italic',
      'character_set' => 'latin,cyrillic',
      'type' => 'serif',
      ),
      'Raleway' => array(
      'styles' => '400,100,200,300,600,500,700,800,900',
      'character_set' => 'latin',
      'type' => 'sans-serif',
      ),
      'Raleway Light' => array(
      'parent_font' => 'Raleway',
      'styles' => '300',
      ),
      'Reenie Beanie' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Righteous' => array(
      'styles' => '400',
      'character_set' => 'latin,latin-ext',
      'type' => 'cursive',
      ),
      'Roboto' => array(
      'styles' => '400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic',
      'character_set' => 'latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese',
      'type' => 'sans-serif',
      ),
      'Roboto Condensed' => array(
      'styles' => '400,300,300italic,400italic,700,700italic',
      'character_set' => 'latin,cyrillic-ext,latin-ext,greek-ext,cyrillic,greek,vietnamese',
      'type' => 'sans-serif',
      ),
      'Roboto Light' => array(
      'parent_font' => 'Roboto',
      'styles' => '100',
      ),
      'Rock Salt' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Rokkitt' => array(
      'styles' => '400,700',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Sanchez' => array(
      'styles' => '400,400italic',
      'character_set' => 'latin,latin-ext',
      'type' => 'serif',
      ),
      'Satisfy' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Schoolbell' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Shadows Into Light' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Source Sans Pro' => array(
      'styles' => '400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900,900italic',
      'character_set' => 'latin,latin-ext',
      'type' => 'sans-serif',
      ),
      'Source Sans Pro Light' => array(
      'parent_font' => 'Source Sans Pro',
      'styles' => '300',
      ),
      'Special Elite' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Squada One' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Tangerine' => array(
      'styles' => '400,700',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Ubuntu' => array(
      'styles' => '400,300,300italic,400italic,500,500italic,700,700italic',
      'character_set' => 'latin,cyrillic-ext,cyrillic,greek-ext,greek,latin-ext',
      'type' => 'sans-serif',
      ),
      'Unkempt' => array(
      'styles' => '400,700',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Vollkorn' => array(
      'styles' => '400,400italic,700italic,700',
      'character_set' => 'latin',
      'type' => 'serif',
      ),
      'Walter Turncoat' => array(
      'styles' => '400',
      'character_set' => 'latin',
      'type' => 'cursive',
      ),
      'Yanone Kaffeesatz' => array(
      'styles' => '400,200,300,700',
      'character_set' => 'latin,latin-ext',
      'type' => 'sans-serif',
      ),

   
   

Итак, зная все это, если все же клиенту нужен какой-то шрифт, которого нет в этом списке - нет способа проще, чем скопировать строку с сайта гугл фонтс и вставить в <head> сайта через Настройки->Интеграция.
Например такой код для Montserrat:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
(хотя это не имеет смысла в данном случае, т.к. этот шрифт уже подключен).

• Related Articles

• Тема Divi 3.0

  В данном видео мы раскрываем возможности работы с темой для wordpress divi: рассмотрим и научимся работать с divi builder научимся создавать корпоративный сайт разберем маркетинговую воронку создадим landing page рассмотрим как интегрировать api ...

• Кнопка CTA в меню сайта

  Если вам нужно разместить яркую кнопку с призывом к действию, вам потребуется настроить ее через код. Это не реализуется через базовый функционал Divi. Обязательно сделайте бэкап сайта перед тем, как будете проводить настройки. Следуйте инструкции: ...

• Вводное видео обучение по работе с DBM

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

• Из подписчика в клиенты

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

• Как учитывать рабочее время по задачам в Zoho Projects

  Для того, чтобы Ваше потраченное время было оплачено, его нужно фиксировать. Показываю порядок действий со скриншотами. Вы в Zoho Connect решили выполнить задачу. Нажимаете кнопку "Посмотреть в Zoho Projects". Если Вы решили сразу приступить к ...