TinyMCE Rich Text Editor custom fonts
Last updated Apr 6th, 2021 | Page history | Improve this page | Report an issue
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
Budget
$301 per month—let's make that $500!
Learn moreHow to connect couple of custom fonts?¶
-
Connect file in the MODX Settings ('gear icon') > System settings in the
external.config.json
field. If it does not exist, create it. It is important to specify file path properly. In most cases it will be../assets/components/tinymcerte/external.config.json
-
File must contain valid JSON data. In example below
toolbar1
andtoolbar2
are also redefined, also additional font sizes have been set. Please find full list of settings here{ "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" }
-
Create own CSS file, not forget to connect it to MODX. Here you can also set default styles for the editor, fonts import is the next:
@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; }
-
Include CSS style file in MODX settings in
tinymcerte.content_css
. Font view in editor will change. -
Optional step. Fonts are already included in the styles usually, and you only need to add them to WYSIWYG. But sometimes it is required to connect fonts on the usage page as well.