Skip to main content

Google fonts

Type: google_fonts

Description

Google Fonts selector with font family and style options.

Screenshot

Google Fonts

Basic Usage

[
"type" => "google_fonts",
"heading" => __("Field Label", "your-text-domain"),
"param_name" => "your_param_name",
"description" => __("Field description", "your-text-domain"),
]

Common Parameters

All param types support these common parameters:

ParameterTypeDescription
typeStringRequired. Must be "google_fonts"
holderStringHTML tag name where the value is displayed in backend edit mode. Default: hidden input
classStringCSS class added to the holder HTML tag
headingStringLabel shown in the editor interface
param_nameStringRequired. Parameter name used in shortcode
valueMixedValue for the parameter
descriptionStringHelp text shown below the field
groupStringTab/group name to organize parameters
sectionStringSection slug to visually group params within a tab
weightIntegerDisplay order (higher = shows first)
edit_field_classStringCSS class for field width (e.g., "vc_col-sm-6")
dependencyArrayShow/hide based on other field values
admin_labelBooleanShow value in element title bar
param_holder_classStringCSS class for the param wrapper in the edit element modal
save_alwaysBooleanForce saving the value even if it equals the default or is empty
callbackArrayJavaScript function callback (e.g., ['after_add' => 'myCallback'])
settingsArrayType-specific configuration options (see Type-Specific Parameters below)
deprecatedStringVersion in which the param was deprecated

Type-Specific Parameters

ParameterTypeDefaultDescription
settingsArray-Configuration array with the following options:
    fieldsArray-Google Fonts fields to display. Possible values: font_family, font_style, font_family_description, font_style_description

Complete Example

<?php
add_action('vc_before_init', 'my_element_with_google_fonts');
function my_element_with_google_fonts() {
vc_map([
"name" => __("My Element", "domain"),
"base" => "my_element",
"category" => __("My Category", "domain"),
"params" => [
[
"type" => "google_fonts",
"heading" => __("Field Label", "domain"),
"param_name" => "param_name",
"description" => __("Field description", "domain"),
"settings" => [
"fields" => [
"font_family",
"font_style",
"font_family_description" => __("Select font family.", "domain"),
"font_style_description" => __("Select font style.", "domain"),
],
],
],
],
]);
}