font(sample)

Display a complete font style seletor. You can select both web safe fonts and Google Web Fonts. Styles can be applied such as colors, letter spacing, italics, and text shadows.

Option Details & Parameters

Type: font

Returns: array

Can be placed in: Admin Panels , Admin Tabs , Meta Boxes , Theme Customizer

Parameter Type Description
name string The name of the option, for display purposes only.
id string A unique ID for this option. This ID will be used to get the value for this option.
desc string The description to display together with this option.
default string (Optional) An array containing the default font and styles to use. Refer below on what to put here.
show_font_family boolean (Optional) If false, the font family field will not be shown. Defaults to true
show_color boolean (Optional) If false, the color field will not be shown. Defaults to true
show_font_size boolean (Optional) If false, the font size field will not be shown. Defaults to true
show_font_weight boolean (Optional) If false, the font weight field will not be shown. Defaults to true
show_font_style boolean (Optional) If false, the font style field will not be shown. Defaults to true
show_line_height boolean (Optional) If false, the line height field will not be shown. Defaults to true
show_letter_spacing boolean (Optional) If false, the letter spacing field will not be shown. Defaults to true
show_text_transform boolean (Optional) If false, the text transform field will not be shown. Defaults to true
show_font_variant boolean (Optional) If false, the font variant field will not be shown. Defaults to true
show_text_shadow boolean (Optional) If false, the text shadow field will not be shown. Defaults to true
show_preview boolean (Optional) If false, the preview iframe will not be shown. Defaults to true
include_fonts mixed (Optional) A regex string (not case sensitive) used to specify the fonts to include. This can also be an array of regex strings. For example, if you put in ^o, only the font names that start with o will be displayed in the drop down list.
show_websafe_fonts boolean (Optional) If false, the list of websafe fonts will not be shown in the font options. Defaults to True.
show_google_fonts boolean (Optional) If false, the list of Google Web Fonts will not be shown in the font options. Defaults to True.
enqueue boolean (Optional) If false, then the Google Font (if used) will not be enqueued automatically. Defaults to true
css string (Optional) CSS rules to be used with this option. Only used when the option is placed in an admin page / panel or a theme customizer section. Refer below for more information on this parameter.
fonts string (Optional) An array containing your custom fonts.

The Default Parameter

The default parameter for this option should be an associative array containing the default styles for the font. Below is a full list of the default values:

array(
'font-family' => 'Open Sans',
'color' => '#333333',
'font-size' => '13px',
'font-weight' => 'normal',
'font-style' => 'normal',
'line-height' => '1.5em',
'letter-spacing' => 'normal',
'text-transform' => 'none',
'font-variant' => 'normal',
'text-shadow-location' => 'none',
'text-shadow-distance' => '0px',
'text-shadow-blur' => '0px',
'text-shadow-color' => '#333333',
'text-shadow-opacity' => '1',
);

You don’t need to include every `key` in your `default` parameter. The ones you omit will have their values as the default.

Web Safe Fonts and Google Fonts

Both web safe fonts and Google WebFonts can be changed and assigned as the default in this option. For Google WebFonts, use the font name when specifying them as the default value for font-family. For example:

'font-family' => 'Exo',
'font-family' => 'Titillium Web',

For web safe fonts, you need to choose from one of these values (mind the quotes):

'font-family' => 'Arial, Helvetica, sans-serif',
'font-family' => ''"Arial Black", Gadget, sans-serif',
'font-family' => '"Comic Sans MS", cursive, sans-serif',
'font-family' => '"Courier New", Courier, monospace',
'font-family' => 'Georgia, serif',
'font-family' => 'Impact, Charcoal, sans-serif',
'font-family' => '"Lucida Console", Monaco, monospace',
'font-family' => '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
'font-family' => '"Palatino Linotype", "Book Antiqua", Palatino, serif',
'font-family' => 'Tahoma, Geneva, sans-serif',
'font-family' => '"Times New Roman", Times, serif',
'font-family' => '"Trebuchet MS", Helvetica, sans-serif',
'font-family' => 'Verdana, Geneva, sans-serif',

The CSS Parameter

The css parameter for this option behaves in a different way as with other options.

Since a lot of styles can be selected for a font, it would be inconvenient to enumerate them all again. To make things easier, you can just use the term value to assign all the styles to your CSS selectors:

'css' => 'h1.site-title {
value
}'

Using the css parameter above would generate all the necessary CSS rules (font-family, line-height, font-weight, etc)

Note that you can still use the methods specified in Generate CSS Automatically for Your Options, the method above is simply for convenience.

Examples

Creating a font option with ALL the style fields

$panel->createOption( array(
'name' => 'Heading Font',
'id' => 'my_font_style',
'type' => 'font',
'desc' => 'Select a style'
) );

Creating a font option, but only allowing the font family and color to be changed. (We’re also setting default values for the other styling)

$panel->createOption( array(
'name' => 'Heading Font',
'id' => 'my_font_style',
'type' => 'font',
'desc' => 'Select a style',
'show_font_weight' => false,
'show_font_style' => false,
'show_line_height' => false,
'show_letter_spacing' => false,
'show_text_transform' => false,
'show_font_variant' => false,
'show_text_shadow' => false,
'default' => array(
'font-family' => 'Exo 2',
'color' => '#888888',
'line-height' => '1em',
'font-weight' => '700',
)
) );