Font size field type

The font size field allows editors to set the font size for elements on their website.

Font size field

Like the other theme editor fields, the font size field is set up in the theme-styles.json or theme-settings.json file.

Below is a minimal configuration example.

{
    "name": "elementFontSize"
    "label": "Font size",
    "type": "fontSize"
}

Configuration

You configure the font size field with the field properties in the theme JSON. Below is a list of available properties.

No results could be found. Please try a different search.

Property	Description
after	A string to show after the field.
allowedUnits	Use this to limit which font size units a user can select. It should be an array of allowed units. Defaults to ["em", "px", "rem"]. Allowed unit values are: em ex px rem
before	A string to show before the field.
decimals	Whether to allow decimal numbers. Defaults to true. Allowed values are true, false, yes, and no.
defaultUnit	The default unit for the font size value. See the description for the allowedUnits property for the allowed unit values. Defaults to px.
defaultValue	The default value if the field doesn't already have a value. The default font size value can be one of the following types: A string. In this case, it's typically the font size value like "18px" or "2.4rem". Although it could be just the size without the unit like "18". A number. In this case it's the size value without the unit. For example, 18, or 2.4. An object. In this case you can explicitly set the size and/or the unit. While you would typically set both values, you don't have to. Either one can be set. Examples of setting the default value in the object format: Set both values: { "size": 18, "unit": "px" } { "size": "2.4", "unit": "rem" } Set just the size { "size": 18, } { "size": "2.4", } Set just the unit { "unit": "rem" }
description	A brief description for the field. This will show below the field label and above the field. It can contain HTML.
help	Some help content that will show when the help icon next to the field label is clicked. This can be used instead of the description value. It can contain HTML.
label	Required The field label text.
max	The maximum font size allowed.
min	The minimum font size allowed.
name	Required The name of the field.
render	How the field will be previewed in the theme editor and how it will be output in templates. See Previewing theme editor changes for more information.
required	Whether the field is required. Allowed values are true, false, yes, and no.
type	Required The field type. The value should be fontSize. This is what tells the system to output the field as a font size field.

Render configuration

Most of the time you will want to output the font size as CSS. (See the Theme styles page for more information about outputting CSS styles.)

For example, if you want to output the CSS as a CSS variable then you can do something like this:

{
    "name": "h1FontSize"
    "label": "Font size",
    "type": "fontSize",
    "render": {
        "type": "css-head",
        "cssVariable": "--h1-font-size"
    }
}

Template values

You can choose to use a template to output the CSS font-size value.

The field value is an object of information for size value. The following data is and example of what is passed to the template for the field.

{
    "size": 18,
    "unit": "px",
    "value": "18px"
}

An example of using a template is if you wanted the user to enter the font size as a pixel value, but you want to output it in rems. Your template value would be something like this:

{% if value.size %}{{ value.size / 10 }}rem{% endif %}

Here is a full example of the JSON configuration for the above example.

{
    "name": "h1FontSize"
    "label": "Font size",
    "type": "fontSize",
    "allowedUnits": ["px"],
    "render": {
        "type": "css-head",
        "template": "{% if value.size %}{{ value.size / 10 }}rem{% endif %}"
    }
}