Font Size
Viafoura supports CSS variables that can be used to override the different sizes of text used in widgets. There are five distinct sizes which can each be individually overridden to match the look and feel of the page.
NoteCSS font size variables are only supported for some elements in the latest version of conversations and are not supported by older browsers such as IE11.
Font Scale
Below is a list of the available CSS font size variables and how they can be overridden. Please note that the values that can be used should be multipliers of 10px. For example, if we wanted to override a font size to be 16px, the value used should be 1.6. A handy formula for this is:
new_pixel_size ÷ 10 = new_sizeQuick reference
| Element | CSS variable | Default (desktop) | Default (mobile) |
|---|---|---|---|
Heading Text (<h1>) | --x-large-font | 32px | 25px |
Subheading Text (<h2>) | --large-font | 20px | 20px |
Primary Text (<p>) | --medium-font | 15px | 14px |
| Body Text (deprecated) | --body-font | 14px | 14px |
| Secondary Text | --small-font | 12px | 12px |
| Label Text | --x-small-font | 10px | 10px |
Heading Text
The heading text represents the styling used for <h1> tags and will only be used in a few places to indicate to the user which widget is being displayed. By default, its font size is 32px on desktop and 25px on mobile.
To override the size of this text, we need to redefine the --x-large-font CSS variable.
.viafoura {
--x-large-font: new_size;
}Subheading Text
The subheading text represents the styling used for <h2> tags and will be used occasionally to highlight to the user a new section in the widget. By default, its font size is 20px for both desktop and mobile.
To override the size of this text, we need to redefine the --large-font CSS variable.
.viafoura {
--large-font: new_size;
}Primary Text
The primary text represents the styling used for <p> tags and is mostly used in places where user submitted content is shown. By default, its font size is 15px on desktop and 14px on mobile.
Note
If setting this variable, please see--body-textbelow.
To override the size of this text, we need to redefine the --medium-font CSS variable.
.viafoura {
--medium-font: new_size;
}Body Text (DEPRECATED)
The body text represents the base styling used for .viafoura elements. By default, its font size is 14px. This is being phased out in favor of the --base-font-size and --medium-font CSS variables.
It is recommended to set this value if you also override the --medium-font variable to match the value set as the --medium-font.
To override the size of this text, we need to redefine the --body-font CSS variable.
.viafoura {
--body-font: new_size;
}Secondary Text
The secondary text represents the styling used for a variety of text elements that are smaller than user submitted content. By default, its font size is 12px on both desktop and mobile.
To override the size of this text, we need to redefine the --small-font CSS variable.
.viafoura {
--small-font: new_size;
}Label Text
The label text represents the styling used for a variety of text elements that are smaller than elements with the secondary font size. By default, its font size is 10px on both desktop and mobile.
To override the size of this text, we need to redefine the --x-small-font CSS variable.
.viafoura {
--x-small-font: new_size;
}Updated 5 days ago