---
description: The setting field type Font Picker
---

# Font picker

### Arguments

| Name          | Type   | Value         | Description                                                     |
| ------------- | ------ | ------------- | --------------------------------------------------------------- |
| `type`        | string | **font**      | The type of setting                                             |
| `name`        | string | {field\_name} | The unique name will be used in template                        |
| `label`       | string | _(optional)_  | The label that appears above of the setting field.              |
| `description` | string | _(optional)_  | The description that appears above under of the setting field.  |
| `tooltip`     | string | _(optional)_  | The long description that appears on the tooltip when hover on. |
| `value`       | string | _(optional)_  | The default value will be used for the first time.              |
| `on`          | object | _(optional)_  | Add listener events for setting field (Supported all event )    |

### Code example

{% tabs %}
{% tab title="section.lh" %}
```ruby
@schema
{
	"name"		: "Font Picker",
	"author"	: "LayoutHub",
	"website"	: "https://www.LayoutHub.com"
}
@endschema


<div class="sample-demo">
	<link href="https://fonts.googleapis.com/css?family=@attr(section.settings.my_font)" rel="stylesheet">
	<h1 style="font-family: @attr(section.settings.my_font)!important">Sample Text</h1>
</div>
```
{% endtab %}

{% tab title="settings.js" %}
```javascript
[
    {
        name: 'my_font',
        label: 'Select font',
        type: 'font',
        value: 'Open Sans'
    }
]
```
{% endtab %}

{% tab title="Download .ZIP" %}
{% hint style="info" %}
Download the sample file below and unzip in the developer direction. If you still have not activated developer mode, [click here](../../getting-started).
{% endhint %}

{% file src="https://1163003613-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgfWhgsKZsZtv4UlNyu%2F-M3yN1_GcO7aqTtBN7RB%2F-M3yO49WHt6eyB7Pga41%2Ffont_picker.zip?alt=media&token=f5dd9d79-fd64-46db-a9b7-7ea9067eb8a1" %}
{% endtab %}
{% endtabs %}
