Configure custom fonts

Configure the fonts available in the MathType editor and understand how they affect rendered formulas. The fonts displayed while editing formulas are configured independently from the fonts used by MathType Integration Services when rendering formulas as images.

After completing this guide, you will be able to customize the fonts available to users and understand how those fonts affect the final output.

Before you begin

Requirements

Make sure you have:

• A working MathType frontend integration.
• Access to the frontend configuration.
• Any custom fonts you want to use available to the browser.
• If formulas are rendered as images in a self-hosted environment, access to install the required fonts on the rendering server.

Applies to

All MathType frontend integrations

Steps

Configure the editor font list

The font selector displayed in the MathType editor is configured through the fonts editor parameter. Each font definition specifies:

• The font identifier stored in the MathML.
• The label displayed in the font selector.
• The browser font family used while editing.

For example:

mathTypeParameters: {
  editorParameters: {
    fonts: [
      {
        id: "Calibri",
        label: "Calibri",
        fontFamily: "Calibri, Helvetica, Arial, sans-serif"
      },
      {
        id: "inherit",
        label: "Default font"
      }
    ]
  }
}

The order of the array determines the order of the font selector.

Make custom fonts available to the browser

Adding a font to the editor configuration does not install that font in the user's browser. If a font is not already available on the user's system, make it available using standard web font techniques such as @font-face. For example:

@font-face {
  font-family: "custom_font";
  src: url("fonts/custom_font.ttf") format("truetype");
}

Once the browser can load the font, it can be referenced in the fontFamily property.

Understand rendering limitations

When formulas are rendered as images, MathType Integration Services use the fonts available on the rendering server. Custom browser fonts are not automatically available to MathType Integration Services.

To use a custom font for server-side rendering, the font must also be installed at the system level on the rendering server. If the required font is not available, a fallback font may be used. As a result, the rendered formula may look different from the formula displayed in the editor.

Custom fonts for server-side rendering can only be used in self-hosted environments where the required fonts can be installed on the server. WIRIS-hosted cloud services do not currently support installing customer-specific fonts.

• On Windows servers, system-installed fonts should generally be available for rendering. 
• On Linux servers, install the required fonts and fontconfig. You can use fc-list to verify that the font is detected by the system. If the font is listed, Java should normally be able to detect and use it.

Apply the configuration

Save the frontend configuration and reload the page where MathType is loaded. If you added custom web fonts, verify that they are successfully loaded by the browser. If you use custom fonts for server-side rendering, make sure the same fonts are installed on the rendering server.

Verify the configuration

Open the MathType editor. Verify that:

• The expected fonts appear in the font selector.
• Selecting a font changes the appearance of the formula while editing.

Verify it worked

Insert a formula using one of the configured fonts. Then:

• Save the content.
• Reopen the formula.
• Verify that the selected font is preserved in the MathML.

If your deployment renders formulas as images, verify that the rendered output uses the expected font. If it differs from the formula displayed in the editor, verify that the font is available on the rendering server as well.

Common issues

A font does not appear in the editor

Verify that:

• The font has been added to the fonts parameter.
• The configuration has been reloaded.
• The parameter syntax is valid.

The editor displays a fallback font

Verify that:

• The font is installed on the user's system.
• The font is loaded using @font-face.
• The fontFamily property specifies valid fallback fonts.

Rendered formulas use a different font

Verify that:

• The required font is installed at the system level on the rendering server.
• On Linux, fontconfig is installed and the font is reported by fc-list.
• The font used on the rendering server matches the font configured in the editor.

If the required font cannot be detected, the rendered formula may use a fallback font and differ from the formula displayed in the editor.

Related articles

• Configure MathType editor parameters.
• MathType Editor parameters.
• Configure rendering output.