Font Management

🚧
Premium Feature
This feature is only available in premium plans. You must pass the projectId with a paid plan to enable this feature.

You can customize the fonts available in the editor text and body controls. This can be changed every time the editor is initialized.

Adding Custom Fonts

You can pass custom fonts configuration during initialization like this:

unlayer.init({
  fonts: {
    showDefaultFonts: true,
    customFonts: [
      {
        label: "Comic Sans",
        value: "'Comic Sans MS', cursive, sans-serif"
      },
      {
        label: "Lobster Two",
        value: "'Lobster Two',cursive",
        url: "https://fonts.googleapis.com/css?family=Lobster+Two:400,700"
      }
    ]
  }
});

In this example default fonts are loaded, and two new fonts are added: a web safe font (Comic Sans) and a Google hosted web font (Lobster Two).

Parameters

Parameter	Description	Default
showDefaultsFonts	This boolean parameter indicates whether default fonts are loaded in the list or not. If it's set to `false`, only your custom fonts will be loaded. If it's set to `true`, your custom fonts will be loaded along with the default fonts.	`true`
customFonts	This is an array of objects which contains your custom fonts. These custom fonts could be web safe fonts or hosted web fonts (google, etc).	`[]`

Each element in customFonts can have the following properties:

Parameter	Description	Example
label	This is the name of the font that will be shown to the end-users in the dropdown.	`Lobster`
value	This is the CSS font stack that will be emitted in the HTML. You should provide at least one fallback font to ensure the text is not displayed in an unwanted font family. Make sure you use single quote marks with the font names instead of double quotation marks to maintain a correct syntax.	`'Lobster', cursive`
url (optional)	This parameter is used only when we work with web fonts. It's important that the URL points to a CSS file with the @font-face properties, and not directly to the font files. Also, CSS must be hosted on HTTPS.	`https://fonts.googleapis.com/css?family=Lobster`

Usage Examples

Here's another example where it only shows your custom fonts and not the default fonts. It's a mix of web safe system fonts and Google fonts.

unlayer.init({
  fonts: {
    showDefaultFonts: false,
    customFonts: [
      {
        label: "Anton",
        value: "'Anton', sans-serif",
        url: "https://fonts.googleapis.com/css?family=Anton"
      },
      {
        label: "Georgia",
        value: "Georgia, Times, 'Times New Roman', serif"
      },
      {
        label: "Helvetica",
        value: "'Helvetica Neue', Helvetica, Arial, sans-serif",
      },
      {
        label: "Lucida",
        value: "'Lucida Grande', 'Lucida Sans', Geneva, Verdana, sans-serif"
      },
      {
        label: "Lato",
        value: "'Lato', Tahoma, Verdana, sans-serif",
        url: "https://fonts.googleapis.com/css?family=Lato"
      }
    ]
  }
});

Default Fonts

This is the complete list of the default fonts in the Unlayer editor and its configuration, including the URL for Google web fonts:

[
  {
    label: "Andale Mono",
    value: "andale mono,times"
  },
  {
    label: "Arial",
    value: "arial,helvetica,sans-serif"
  },
  {
    label: "Arial Black",
    value: "arial black,avant garde,arial"
  },
  {
    label: "Book Antiqua",
    value: "book antiqua,palatino"
  },
  {
    label: "Comic Sans MS",
    value: "comic sans ms,sans-serif"
  },
  {
    label: "Courier New",
    value: "courier new,courier"
  },
  {
    label: "Georgia",
    value: "georgia,palatino"
  },
  {
    label: "Helvetica",
    value: "helvetica,sans-serif"
  },
  {
    label: "Impact",
    value: "impact,chicago"
  },
  {
    label: "Symbol",
    value: "symbol"
  },
  {
    label: "Tahoma",
    value: "tahoma,arial,helvetica,sans-serif"
  },
  {
    label: "Terminal",
    value: "terminal,monaco"
  },
  {
    label: "Times New Roman",
    value: "times new roman,times"
  },
  {
    label: "Trebuchet MS",
    value: "trebuchet ms,geneva"
  },
  {
    label: "Verdana",
    value: "verdana,geneva"
  },
  {
    label: "Lobster Two",
    value: "'Lobster Two',cursive",
    url: "https://fonts.googleapis.com/css?family=Lobster+Two:400,700"
  },
  {
    label: "Playfair Display",
    value: "'Playfair Display',serif",
    url: "https://fonts.googleapis.com/css?family=Playfair+Display:400,700"
  },
  {
    label: "Rubik",
    value: "'Rubik',sans-serif",
    url: "https://fonts.googleapis.com/css?family=Rubik:400,700"
  },
  {
    label: "Source Sans Pro",
    value: "'Source Sans Pro',sans-serif",
    url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700"
  },
  {
    label: "Open Sans",
    value: "'Open Sans',sans-serif",
    url: "https://fonts.googleapis.com/css?family=Open+Sans:400,700"
  },
  {
    label: "Crimson Text",
    value: "'Crimson Text',serif",
    url: "https://fonts.googleapis.com/css?family=Crimson+Text:400,700"
  },
  {
    label: "Montserrat",
    value: "'Montserrat',sans-serif",
    url: "https://fonts.googleapis.com/css?family=Montserrat:400,700"
  },
  {
    label: "Old Standard TT",
    value: "'Old Standard TT',serif",
    url: "https://fonts.googleapis.com/css?family=Old+Standard+TT:400,700"
  },
  {
    label: "Lato",
    value: "'Lato',sans-serif",
    url: "https://fonts.googleapis.com/css?family=Lato:400,700"
  },
  {
    label: "Raleway",
    value: "'Raleway',sans-serif",
    url: "https://fonts.googleapis.com/css?family=Raleway:400,700"
  },
  {
    label: "Cabin",
    value: "'Cabin',sans-serif",
    url: "https://fonts.googleapis.com/css?family=Cabin:400,700"
  },
  {
    label: "Pacifico",
    value: "'Pacifico',cursive",
    url: "https://fonts.googleapis.com/css?family=Pacifico"
  }
]