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.

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.

If the rendering server does not have a required font installed, it will use the closest available alternative. This means that the appearance of formulas while editing may differ slightly from the rendered images.

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.

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 image formulas, verify that the rendered output uses the expected font or an appropriate fallback.

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 on the rendering server.
• MathType Integration Services support the requested font.
• A suitable fallback font is available if the font cannot be loaded.

Related articles

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