Textbox.io 2.x Documentation : fonts

configuration

    ↳ ui

        ↳ fonts

The ui fonts property defines the list of available fonts from the fonts dropdown menu.

The fonts property accepts an array of strings that define font-face values. These font-face values are then seen in the editor font menu. Note that font-face values may contain font fallbacks if you so choose.

For more advanced use cases, the fonts property can also accept an array of objects. Each object should contain a value and text property. The value property defines the font-face value, while the text property defines the visible label given to the font-face value in the editor font menu.

Simple Example

If strings are provided to the fonts array, the editor will use these values to construct available font-face values in the font menu. Note that these strings will be displayed in the font menu UI unchanged.

// Create a simple font menu configuration with some single font choices and a font fallback
var configUi = {
	ui : {
  		fonts : [ 'Helvetica', 'Arial', 'Times New Roman', '"Comic Sans MS", cursive, sans-serif' ]
	}
};
 
var editor = textboxio.replace('#targetId', configUi);

Advanced Example

If objects are provided to the fonts array that define a value and text, the editor will use the value property to define the CSS font-face to apply while displaying the font menu item in the UI with the text provided. This allows you to customize the display names of fonts available in the font menu.

var configUi = {
	ui : {
   		fonts : [
    	  {
        	 value: '"Comic Sans MS", cursive, sans-serif',
	         text: 'A silly font'
    	  },
	      {
    	     value: 'Tahoma' // equivalent to providing just a string
		  },
		  'Arial', // you can use a mixture of objects and strings
    	  {
        	 value: 'Helvetica',
			 text: 'A nicer font'
		  }
		]
	}
};
 
var editor = textboxio.replace('#targetId', configUi);

Advanced Object Properties

text