Jump to main content Jump to doc navigation

Как подключить свои шрифты?

  1. Подключаем в Настройках 'Шестёренка' > Системные настройки в поле external.config.json будущий файл. Если его нет - создаем. Важно правильно прописать путь к файлу! Скорее всего в большинстве случаев это будет ../assets/components/tinymcerte/external.config.json

  2. В файле должен быть валидный JSON массив данных. В примере ниже toolbar1 и toolbar2 переопределяются, также задаются дополнительные размеры шрифтов. Полный список настроек есть здесь

    {
        "toolbar1": "undo redo | styleselect| bullist numlist outdent indent | link image",
        "toolbar2": "fontselect fontsizeselect forecolor|formatselect lineheight | bold italic | alignleft aligncenter alignright alignjustify|",
        "font_formats": "Open Sans=open sans; Roboto=roboto; Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats",
        "fontsize_formats": "8pt 10pt 12pt 14pt 18pt 24pt 36pt 48pt 72pt 96pt"
    }
    
  3. Создаем свой CSS файл стилей, не забываем подключить его к MODX. Здесь же можно задать стили по умолчанию для редактора, внутри также импортируем шрифты:

    @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap");
    
    body {
        font-family: "Open Sans", sans-serif;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Roboto", sans-serif;
    }
    
  4. Подключаем файл стилей в настройках MODX в переменной tinymcerte.content_css. Поэксперементируйте, отображение шрифтов в редакторе измениться.

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

Смотри также

  1. Tiny Cloud Документация
  2. TinyMCE редактор

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • Jens Wittmann – Gestaltung & Entwicklung
  • Digital Penguin
  • eydolan
  • deJaya
  • Following Sea
  • Sepia River Studios
  • Nick Clark
  • Lefthandmedia
  • YJ
  • Murray Wood
  • Dannevang Digital
  • Richard

Budget

$217 per month—let's make that $500!

Learn more