Documentation / MathType

  • Demos
  • Visit our website
  • Downloads
  • Contact us
  • MathType

    • Wiris Quizzes

      • Learning Lemur

        • CalcMe

          • MathPlayer

            • Store FAQ

              • VPAT for the electronic documentation

                • MathFlow

                  • BF FAQ

                    • Home
                    • MathType
                    • MathType Integrations
                    • MathType web interface features
                    • MathType web interface features

                    Custom font list

                    Reading time: 2min

                    The dropdown list of the font selector is customizable by developers.

                    Parameter

                    The font list can be specified in JSON, and passed to MathType as the 'fonts' parameter during the initialization.

                    The font list can be passed both as a Javascript object or as a plain string.

                    Example of Javascript object:

                     var editor = com.wiris.js.JsEditor.newInstance({
                     'fonts': [
                     {
                     'id': 'Calibri',
                     'label': 'Calibri Font',
                     'fontFamily': 'Calibri, Helvetica, Arial, Dejavu Sans'
                     },
                     {
                     'id': 'inherit',
                     'label': 'Default Font'
                     }
                     ]
                     });
                    

                    Same example of string:

                     var editor = com.wiris.js.JsEditor.newInstance({'fonts': "[{'id': 'Calibri', ...}]"});

                    Content

                    • The font list is an array ("[...]") of objects, and each object represents one font item.
                    • The order of font items in the selector will be the same as in the array.
                    • Objects can have these properties:
                      • id (required): the o fficial name of the font (case sensitive) that will end up in the MathML. Example: "Times New Roman".
                      • label: human-readable name of the font to be displayed in the selector. Example: "Paper print font". If omitted, it takes the value of id.
                      • fontFamily: comma-separated list of fallback fonts. The browser will use the first available font in the list, to render the formula while it's being edited. If omitted, it takes the value of id.
                    • There is a special font object for the case when no font will be put into the MathML, so the formula will be rendered with a "default font". This "default font" item has:
                      • id = “inherit”
                      • fontFamily property will be ignored. To set the "default font" family, use the [MW] parameter 'fontFamily'.

                    Example

                     /* Javascript code */
                     var editor = com.wiris.js.JsEditor.newInstance({
                     // Font selector list
                     'fonts': [
                     // No font in the MathML
                     {
                     'id': 'inherit',
                     'label': '- default -'
                     }
                     // We know this font is installed in user computer
                     {
                     'id': 'Calibri',
                     'label': 'Children'
                     }
                     // This font may be not installed in user computer, so choose a substitute
                     {
                     'id': 'Helvetica',
                     'fontFamily': 'Helvetica, Arial, Dejavu Sans, sans-serif'
                     }
                     // This font is not installed in user computer
                     // but the browser will download it by CSS
                     // (see CSS example below)
                     {
                     'id': 'Squealer',
                     'label': 'AC/DC',
                     'fontFamily': 'custom_font_squealer, serif'
                     }
                     ],
                     // This is the fontFamily used when no font
                     'fontFamily': 'Times New Roman'
                     });

                    External fonts

                    To ensure the user browser has a particular font, you can force it to download by using the common CSS method @font-fac.

                     /* CSS style sheet */
                     @font-face {
                     font-family: 'custom_font_squealer';
                     src: url('fonts/underworld/squealer.eot');
                     src: url('fonts/underworld/squealer.eot') format('embedded-opentype'), url('fonts/underworld/squealer.ttf') format('truetype');
                     font-weight: normal;
                     font-style: normal;
                     }

                    Image server

                    Probably your system is configured to take the MathML produced by the user and send it to a MathType image server – either wiris.net or your own. If so, the images will be produced using the available fonts in the server, plus some symbols hardcoded in the server.

                    Today the only available fonts are the ones installed at system level; the image service does not load fonts from other sources yet.

                    Was this article helpful?

                    Yes
                    No
                    Give feedback about this article

                    Related Articles

                    • Chemistry
                    • Handwritten input

                    Custom font list

                    Parameter Content Example External fonts Image server

                    Making people’s STEM work more meaningful

                    MathType

                    • MathType for Office Tools
                    • MathType for Mac
                    • MathType for Microsoft 365
                    • MathType for Google Workspace
                    • MathType for LMS
                    • MathType for XML Editors
                    • Arabic notation
                    • Our products accessibility
                    • MathType is online

                    WirisQuizzes

                    Learning Lemur

                    Solutions for Education

                    • Blackboard Learn
                    • Brightspace by D2L
                    • Canvas
                    • Google Classroom
                    • Moodle
                    • Schoology

                    Solutions for Publishing Houses

                    Solutions for Technical Writers

                    Solutions for Chemistry

                    Integrations

                    • HTML Editors
                    • MathType in WordPress

                    Pricing

                    Company

                    Careers

                    Blog

                    Contact Us

                    Buy Now

                    Plugin Downloads

                    © Wiris 2025

                    • Cookie Settings
                    • Cookie Policy
                    • Terms of Use
                    • Privacy Policy / GDPR
                    • Student Data Privacy
                    • Compliance
                    • Powered by Helpjuice
                    Expand