Arguments

Name	Type	Default	Description
id	string		A unique ID. This ID will be used to get the value
type	string	typography	Type of the field
title	string		Title of the field
default	array		Default value from database, if the option doesn’t exist
subtitle	string		Subtitle to display below the title
desc	string		Description to display after the field
help	string		Text to display on right-corner (as hover/popup) the field
class	string		Extra CSS classes (space separated) to append to the field
before	string		Content to display before the field
after	string		Content to display after the field
dependency	array		Define field visibility depending on other field value
attributes	array		Extra HTML attributes to append to the field
sanitize	string		Callback function for sanitizing value
validate	string		Callback function for validating value
EXTRAS
font_family	bool	true	Flag to display font_family of the field. (specifies the font)
font_weight	bool	true	Flag to display font_weight of the field. (sets the size of a font)
font_style	bool	true	Flag to display font_style of the field. (specifies the font style
font_size	bool	true	Flag to display font_size of the field. (sets the size of a font)
line_height	bool	true	Flag to display line_height of the field. (specifies the height of a line)
letter_spacing	bool	true	Flag to display line_height of the field. (specifies the height of a line)
text_align	bool	true	Flag to display text_align of the field. (specifies the horizontal alignment of text in an element)
text_transform	bool	true	Flag to display  text_transform  of the field. (controls the capitalization of text)
color	bool	true	Flag to display color of the field. (specifies the color of text)
subset	bool	true	Flag to display subset of the field. (specifies the languages of font)
chosen	bool	true	Flag to enable ChosenJS style select.
preview	bool	true	Flag to display preview font area of the field.  (true  false or set always for show preview always.
backup_font_family	bool	false	Flag to display  backup_font_family of the field. (specifies the generic font family backup)
font_variant	bool	false	Flag to display font_variant of the field. (specifies whether or not a text should be displayed in a small-caps font)
word_spacing	bool	false	Flag to display  word_spacing  of the field. (increases or decreases the white space between words.)
text_decoration	bool	false	Flag to display  text_decoration  of the field. (specifies the decoration added to text)
custom_style	bool	false	Flag to display  custom_style  of the field.
extra_styles	bool	false	Flag to display extra_styles of the field. (sets allows multiple choose the font styles)
exclude	string		Define a comma-separated list of font family group to be excluded from the list.( google custom,safe )
unit	string	px	Unit to display on the border inputs, also sets output CSS property unit value.
output	array|string		CSS elements selector
output_important	bool	false	Flag to add !important rule to output css

Default Arguments

Name	Type	Description
color	string	String representing the default color value. for eg. #1e73be, rgba(255,0,0,0.25)
font-family	string	String representing the default fontfamily value. for eg. Open Sans Roboto Arial
backup-font-family	string	String representing the default backup fontfamily value. for eg. Arial, Helvetica, sans-serif
font-weight	string	String representing the default font weight value. for eg.  100  200  300  normal  500  600  700 800 900
font-style	string	String representing the default font style value.  (normal italic)
font-size	number	Numeric representing the default font size field value
line-height	number	Numeric representing the default line height value
letter-spacing	number	Numeric representing the default letter spacing value
word-spacing	number	Numeric representing the default word spacing value
text-align	string	String representing the default text align value.  for eg. left center right justify
text-transform	string	String representing the default text transform value. for eg.  none  capitalize  uppercase  lowercase
font-variant	string	String representing the default font varaiant value. for eg. normal small-caps all-small-caps
text-decoration	string	String representing the default text decoration value. for eg. none underline underline dotted underline dashed
custom-style	string	String representing the default custom style value. for eg. text-shadow: 1px 1px 1px red
extra-styles	array	Array representing the default extra styles value. for eg.  100  100italic  200  200italic  ... 900 900italic
type	string	String representing the default font repository value. for eg. google safe custom
subset	string	String representing the default font subset value. for eg. latin latin-ext
unit	string	String representing the default font unit value. for eg. px em rem %

Simple Typography Field Example

array(
  'id' => 'example-typography',
  'type' => 'typography',
  'title' => 'Typography',
),

Typography Field Example with Default

array(
  'id' => 'example-typography',
  'type' => 'typography',
  'title' => 'Typography',
  'default' => array(
    'color' => '#ffbc00',
    'font-family' => 'Open Sans',
    'font-size' => '16',
    'line-height' => '20',
    'unit' => 'px',
    'type' => 'google',
  ),
),

Typography Field Example with Output

array(
  'id' => 'example-typography',
  'type' => 'typography',
  'title' => 'Typography',
  'output' => '.heading-area',
  'default' => array(
    'color' => '#ffbc00',
    'font-family' => 'Open Sans',
    'font-size' => '16',
    'letter-spacing' => '-1',
    'text-align' => 'center',
    'text-transform' => uppercase',
    'subset' => 'latin-ext',
    'line-height' => '20',
    'unit' => 'px',
    'type' => 'google',
  ),
),