1. Home
  2. Docs
  3. WordPress Studio Framework
  4. Framework Fields
  5. Typography Field

Typography Field


idstring A unique ID. This ID will be used to get the value
typestringtypographyType of the field
titlestring Title of the field
defaultarray Default value from database, if the option doesn’t exist
subtitlestring Subtitle to display below the title
descstring Description to display after the field
helpstring Text to display on right-corner (as hover/popup) the field
classstring Extra CSS classes (space separated) to append to the field
beforestring Content to display before the field
afterstring Content to display after the field
dependencyarray Define field visibility depending on other field value
attributesarray Extra HTML attributes to append to the field
sanitizestring Callback function for sanitizing value
validatestring Callback function for validating value
font_familybooltrueFlag to display font_family of the field. (specifies the font)
font_weightbooltrueFlag to display font_weight of the field. (sets the size of a font)
font_stylebooltrueFlag to display font_style of the field. (specifies the font style
font_sizebooltrueFlag to display font_size of the field. (sets the size of a font)
line_heightbooltrueFlag to display line_height of the field. (specifies the height of a line)
letter_spacingbooltrueFlag to display line_height of the field. (specifies the height of a line)
text_alignbooltrueFlag to display text_align of the field. (specifies the horizontal alignment of text in an element)
text_transformbooltrueFlag to display  text_transform  of the field. (controls the capitalization of text)
colorbooltrueFlag to display color of the field. (specifies the color of text)
subsetbooltrueFlag to display subset of the field. (specifies the languages of font)
chosenbooltrueFlag to enable ChosenJS style select.
previewbooltrueFlag to display preview font area of the field.  (true  false or set always for show preview always.
backup_font_familyboolfalseFlag to display  backup_font_family of the field. (specifies the generic font family backup)
font_variantboolfalseFlag to display font_variant of the field. (specifies whether or not a text should be displayed in a small-caps font)
word_spacingboolfalseFlag to display  word_spacing  of the field. (increases or decreases the white space between words.)
text_decorationboolfalseFlag to display  text_decoration  of the field. (specifies the decoration added to text)
custom_styleboolfalseFlag to display  custom_style  of the field.
extra_stylesboolfalseFlag to display extra_styles of the field. (sets allows multiple choose the font styles)
excludestring Define a comma-separated list of font family group to be excluded from the list.( google custom,safe )
unitstringpxUnit to display on the border inputs, also sets output CSS property unit value.
outputarray|string CSS elements selector
output_importantboolfalseFlag to add !important rule to output css

Default Arguments

colorstringString representing the default color value. for eg. #1e73bergba(255,0,0,0.25)
font-familystringString representing the default fontfamily value. for eg. Open Sans Roboto Arial
backup-font-familystringString representing the default backup fontfamily value. for eg. Arial, Helvetica, sans-serif
font-weightstringString representing the default font weight value. for eg.  100  200  300  normal  500  600  700 800 900
font-stylestringString representing the default font style value.  (normal italic)
font-sizenumberNumeric representing the default font size field value
line-heightnumberNumeric representing the default line height value
letter-spacingnumberNumeric representing the default letter spacing value
word-spacingnumberNumeric representing the default word spacing value
text-alignstringString representing the default text align value.  for eg. left center right justify
text-transformstringString representing the default text transform value. for eg.  none  capitalize  uppercase  lowercase
font-variantstringString representing the default font varaiant value. for eg. normal small-caps all-small-caps
text-decorationstringString representing the default text decoration value. for eg. none underline underline dotted underline dashed
custom-stylestringString representing the default custom style value. for eg. text-shadow: 1px 1px 1px red
extra-stylesarrayArray representing the default extra styles value. for eg.  100  100italic  200  200italic  ... 900 900italic
typestringString representing the default font repository value. for eg. google safe custom
subsetstringString representing the default font subset value. for eg. latin latin-ext
unitstringString representing the default font unit value. for eg. px em rem %

Simple Typography Field Example

  'id' => 'example-typography',
  'type' => 'typography',
  'title' => 'Typography',

Typography Field Example with Default

  '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

  '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',
Was this article helpful to you? Yes No

How can we help?