Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

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"
  }
]

Updated 11 months ago


Font Management


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.