Google Fonts

:discourse2: Краткое описание Google Fonts — это простой компонент темы, который позволяет добавить шрифт из Google Fonts без написания CSS-кода.
:eyeglasses: Предпросмотр Предпросмотр в конструкторе тем Discourse
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/discourse-google-font-component
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Возможности

Этот компонент позволяет установить основной шрифт сайта, а при желании — отдельные шрифты для заголовков и моноширинного текста (блоков кода). Вы также можете выбрать толщину шрифта в каждом случае и увеличить его размер.

Внутренне это настраивает небольшой фрагмент CSS вместе с тегом <link> для шрифтов Google. Обратите внимание, что загрузка файлов шрифтов осуществляется с серверов Google по адресу https://fonts.googleapis.com/.

Настройки

Название Описание
fonts Введите название шрифта (или шрифтов), которые вы хотите использовать, с сайта fonts.google.com. Обратите внимание: названия шрифтов чувствительны к регистру!
body font Основной шрифт, используемый во всем Discourse; должен быть указан в настройке “fonts” выше
body font weight Толщина шрифта в диапазоне 100–900. 400 — нормальный, 700 — жирный
headline font Опциональный шрифт для заголовков; должен быть указан в настройке “fonts” выше
headline font weight Толщина шрифта в диапазоне 100–900. 400 — нормальный, 700 — жирный
monospaced font Опциональный шрифт для блоков кода; должен быть указан в настройке “fonts” выше
monospaced font weight Толщина шрифта в диапазоне 100–900. 400 — нормальный, 700 — жирный
normal font size Размер шрифта по умолчанию для всех пользователей; изменение этого параметра пропорционально изменяет все размеры шрифтов
smaller font size Доступно в настройках интерфейса каждого пользователя
larger font size Доступно в настройках интерфейса каждого пользователя
largest font size Доступно в настройках интерфейса каждого пользователя

:discourse2: Размещено нами? Компоненты тем доступны для использования в наших тарифах Standard, Business и Enterprise.

51 лайк

Это фантастика! Можно ли установить это несколько раз, чтобы ссылаться на разные темы, изменив его имя при расширенной установке?

Не вижу причин, почему нет. Мы, например, уже дважды устанавливали одну и ту же тему — здесь, на Meta, чтобы были версии как со светлой, так и с тёмной темой.

3 лайка

Спасибо. Забыл, что можно переименовать его, чтобы идентифицировать или связать с другими темами.

1 лайк

Спасибо. Мне очень нравится. :grin:

3 лайка

Спасибо :heart: Мне это очень нравится.

Я только что обнаружил, что этот компонент не работает для страниц /pub/ (опубликованных). Шрифты не загружаются на этих страницах, из-за чего отображается шрифт, похожий на Times New Roman по умолчанию.

1 лайк

Я также вижу шрифты по умолчанию, но на странице активации аккаунта

https://yoursite.org/u/activate-account/...

Я попробовал, и это действительно проблема.

Опубликованная страница пытается загрузить шрифт Google через компонент темы:

image

Поскольку файл шрифта не загружается на опубликованной странице, не происходит переключения на переменную шрифта Arial, sans-serif, и вместо этого используется Times New Roman.

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

1 лайк

Честно говоря, с момента этого открытия я определяю свои шрифты в пользовательском CSS. Работает отлично.

2 лайка

Это здорово, спасибо вам и вашей команде за разработку такой удобной функции ^^. Я порекомендую её тем, кого знаю, кто использует Discourse для создания пользовательских сообществ.

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

Я протестировал это на шрифтах Work Sans и Zilla Slab. Изменил толщину шрифта с значения по умолчанию (400) на 300. После этого жирный текст перестал отображаться жирным. Сбросил настройку, и жирный текст снова появился.

Я вернул значение 400 и оставил всё как есть, но хотел сообщить вам об этом.

Спасибо за вашу работу над этим!

Есть ли способ немного глубже разобраться в деталях? Шрифт “Headline” по умолчанию отображается с весом 900 для заголовков внутри тем. Было бы здорово установить значения по умолчанию для каждого из этих Markdown-объектов.

1 лайк

Похоже, в этом есть ошибка, по крайней мере на моём форуме. Если я добавляю шрифт «Inter» с помощью этого компонента, происходит следующее:

  • Начинаю редактировать или составлять сообщение
  • Переключаюсь на другое приложение, пока редактор открыт
  • Возвращаюсь, и масштаб настроен неправильно, как будто слишком сильно приближено
  • Также появляются ошибки в чате и при прокрутке

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

Это известная ошибка? Есть ли исправление?

Спасибо

2 лайка

У нас уже встроен шрифт Inter, если вы захотите изменить Основной шрифт и Шрифт заголовков в разделе администрирования > настройки сайта. Компонент не требуется.

2 лайка

Какая версия Discourse? У меня 3.3 stable, и я не вижу Inter. Столкнулся с теми же проблемами, что и некоторые пользователи здесь, с этим компонентом.

У меня тоже 3.3, и я хочу использовать Inter. Шрифт загружается, но жирный текст не отображается жирным.

Для встроенной опции Inter необходимо обновиться до версии 3.4

2 лайка

Я только что объединил рефакторинг этого компонента, который лучше согласуется с обновлениями Google Fonts — это должно исправить некоторые проблемы, с которыми сталкивались пользователи при отображении разных начертаний.

Обратите внимание, что форматирование настройки немного изменилось: теперь веса нельзя указывать в настройке имени шрифта, например Roboto:300,300i,500, и это нужно будет изменить на простое Roboto… однако при обновлении это должно быть перенесено автоматически.

2 лайка