Шрифты Есть решение

Добрый день, как понять какая строка кода подтягивает определенные шрифты на сайте? Интересуют эти два, с другими разобрался. Никаких ссылок на что-то похожее в index.html не вижу, вероятнее всего тянет какой-то плагин. Вот сам сайт https://gyrosmart-spb.ru/

4 ответа

  • 2

    Тянет ее какой-то из плагинов, возможно quickorder или autobadge

  • 2
    replicant 21 февраля 2021 22:54 # Решение

    Это не обязательно может быть в index.html. Основной файл темы собирается по принципу матрешки. Причиной может быть любой из входящих в эту кучу шаблонов.

    Вообще у вас там Roboto изначально заложен на уровне https://gyrosmart-spb.ru/wa-data/public/site/themes/balance/css/fonts.css


    Но, если посмотреть исходный код, то там встретим вот такое включение Гуглошрифтов семейства Робото.

    <!-- plugin hook: 'frontend_head' -->
    <script>(function($){$(function(){$.autobadgeFrontend.init({update:'/autobadge/update/',forceParentVisible:'',delayLoading:'',delayLoadingAjax:'',forceParentRelative:'1',showLoader:'1'});});})(jQuery);</script>
    
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    Очевидно, что надо искать где-то в точке вывода плагинов через 

    frontend_head

    Т.е. вывод идет через те шаблоны, где это включение хука прописано.

    Для того, чтобы выяснить какие плагины задействуют этот хук, установите плагин Управление плагинами https://www.webasyst.ru/store/.... Он покажет куда копать дальше примерно так




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

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

    • +1
      Герман Максимов Герман Максимов 22 февраля 2021 01:37 #

      Спасибо, действительно тянул плагин заказа в 1 клик. Этим кодом:

      /**
           * Get css and fonts
           *
           * @return array ('inline_css', 'google_fonts')
           */
          public static function getCss()
          {
              if (self::$css) {
                  self::$css = str_replace(';}', '}', self::$css);
              }
              $google_fonts = array("'Open Sans',sans-serif" => "Open+Sans", "'Open Sans Condensed',sans-serif" => "Open+Sans+Condensed:300", "'Roboto',sans-serif" => "Roboto", "'Roboto Condensed',sans-serif" => "Roboto+Condensed", "'Roboto Slab',serif" => "Roboto+Slab", "'PT Sans',sans-serif" => "PT+Sans", "'Lora',serif" => "Lora", "'Lobster',cursive" => "Lobster", "'Ubuntu',sans-serif" => "Ubuntu", "'Noto Sans',sans-serif" => "Noto+Sans");
              $active_fonts = array();
              foreach (self::$fonts as $f) {
                  if (isset($google_fonts[$f])) {
                      $active_fonts[$f] = $google_fonts[$f];
                  }
              }
              return array('inline_css' => self::$css, 'google_fonts' => $active_fonts ? '<link href="https://fonts.googleapis.com/css?family=' . implode('%7C', $active_fonts) . '" rel="stylesheet">' : '');
          }

      Теперь остается вопрос как реализовать здесь font-display:swap чтоб угодить лайтхаусу

      • +1
        replicant replicant 22 февраля 2021 07:51 #

        Я бы отрезал весь CSS и шрифты плагина, покоцав функцию вывода, если отключение настройками не предусмотрено. СSS вынес бы в тему дизайна либо в основной файл либо доп. файлом типа quickorder.css.

        Подгрузку с Гугла убрал бы полностью, заменив шрифты на нужные на вот отсюда https://google-webfonts-helper... и закачав их локально на сервер. Там нужно-то 3-4 начертания + Italic обычно, причем Italic можно не прелоадить в зависимости от темы дизайна, если он редко встречается.

        Preload ключевых начертаний семейства Робото или иного реализовал бы в index.html, а всякие swap, local и прочее в основном шрифтовом CSS вашей темы и только для современных браузеров в формате woff2. Старье нет смысла поддерживать.

        В CSS было бы как-то так (на примере одного начертания)

        @font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src: local('Roboto'),local('Roboto-Regular'),url(/fonts/roboto-v20-latin_cyrillic-regular.woff2) format("woff2")}

        В шаблоне как-то так

        <link rel="preload" href="/fonts/roboto-v20-latin_cyrillic-regular.woff2" as="font" type="font/woff2" crossorigin />

        И всё. Лайтхаус будет счастлив.

  • 1
    replicant 21 февраля 2021 22:56 # Решение

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

    <style id="quickorder-inline-styles" data-inline-css="1">[data-quickorder-cb]{background:rgba(38,184,114,1);border:1px solid #26b872;color:#fff;-webkit-box-shadow:1px 1px 1px 1px #d6ebd1;-moz-box-shadow:1px 1px 1px 1px #d6ebd1;box-shadow:1px 1px 1px 1px #d6ebd1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
    
    font-family:'Roboto',sans-serif; - вот это есть
    
    font-size:13px;font-style:normal;


    В браузере исходный код страницы тоже может много показать.
  • 3
    Vaslav 22 февраля 2021 05:06 #

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

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите