Wiris

Documentation / MathType

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

    • WirisQuizzes

      • LearningLemur

        • CalcMe

          • MathPlayer

            • Store FAQ

              • MathFlow

                • BF FAQ

                  • Miscellaneous

                    • Wiris Integrations

                      • Home
                      • MathType
                      • Technical documentation
                      • MathType for HTML editors
                      • User interface customization
                      • User interface customization

                      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?

                      Give feedback about this article

                      Related Articles

                      • Chemistry
                      • Handwritten input

                      Custom font list

                      Parameter Content Example External fonts Image server

                      Empowering STEM education

                      MathType

                      • Office Tools
                      • LMS
                      • XML
                      • HTML

                      WirisQuizzes

                      Learning Lemur

                      Integrations

                      Solutions

                      • Education
                      • Publishing houses – platforms and interactive
                      • Publishing houses – Print and digital
                      • Technical writers

                      Pricing

                      Downloads

                      Blog

                      • Success stories

                      About us

                      • Careers
                      • Partnership

                      Contact Us

                      Contact Sales

                      European union (European Regional Development Fund) and 1EdTech (TrustEd Apps Certified)
                      • Cookie Policy
                      • Terms of Use
                      • Privacy Policy / GDPR
                      • Student Data Privacy
                      • Compliance
                      • Cookie Settings

                      © Wiris 2026

                      Expand