Skip to main content

Custom font list

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

fontlist.png

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.

In this section: