Использование кастомно загруженных шрифтов

Frontend разработчик
1

Добрый день, коллеги.
Скажите пожалуйста, мне при создании визуализаций, требуется использовать шрифты которых нет в типовом наборе Windows.
Я скачал шрифт, прописал его использование в css файле. Но при отрисовке страницы идет ошибка загрузки шрифта.
Компонент разработан на React.
Обращаю внимание, что при открытии страницы идет загрузка шрифта по адресу Request URL: http://10.2.4.57/271aba559f449deaefdf.ttf
При сборке приложения, файл шрифта помещается в ресурсы датасета с исходным названием.

Возможно у вас есть похожий рабочий пример? Или хотя бы в целом прошу дать комментарий ситуации.

Коллеги, дополнительно просьба подсказать как подключить дополнительные шрифты, чтобы их можно было использовать в коробочных дэшах. Чтобы в выпадающем списке в self-service можно было выбрать данные шрифты.

2

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

  • Вы загружате шрифты в виде (ttf, otd, woff,woff2…) в ресурсы нужного атласа или например а атлас ds_res.
  • Создаете в ресурсах файл styles.css или _global.css uгде описываете шрифт через font-face и там же прописываете стили, где используете нужный стиль, например грубо
@font-face {
    font-family: 'DIN Pro';
    font-style: normal;
    font-weight: 100 400;
    src: local('DIN Pro'),
    url('/srv/resources/ds_res/dinpro_light.otf') format('opentype');
  }

* {
font-family: "DIN Pro";
}

И тогда лучше помечать шрифты именно через этот файл, а не через например scss файлы для реакт-компонентов.

3

Коллеги, подскажите еще пожалуйста, как подключить кастомный шрифт в компонент из коробки?
Например в дэш “значение” view_class: ‘111.label’.
или любой другой.

4

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

display: {
    fontFamily: 'DIN Pro',
  },

Для визуализаций другого типа вам придется создать ключ echart, который является объектом с частью конфигурации элементов графика Echarts

Вот тут есть список всех опций, который могут принимать поле fontFamily для элементов графика

echart: {
   yAxis: {
     axisLabel: {
         fontFamily: 'DIN Pro'
      }
   },
   series: {
     label: {
         fontFamily: 'DIN Pro'
     }
   }
}

Код в конфиге деша для стандартных графиков (столбики, линии, точки, штабели) заменит шрифт у подписей к осям и у лейблов к сериям графика