Custom Fonts

You can add and manage custom fonts to provide a more personalized design experience for your end-users. These fonts will be available for selection in the editor, allowing users to create content that adheres to their branding.

Usage

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",
        weights: [{ label: 'Regular', value: 400 }, { label: 'Bold', value: 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`
weights (optional)	This is an array of supported weights for each font.	`[{ label: 'Regular', value: 400 }, { label: 'Bold', value: 700 }]`

Example

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