Font Family
The "Font Family" watch attribute (see picture below) allows you to customize the typeface used for text within the Watch. Users can choose from the following options:
Predefined Font Families
Users can select from the list of predefined font families such as Roboto, Lato, Rubic, and more. Each of these font families has a distinct style and appearance, allowing users to personalize the text in their Watch component.
Device Dependent
Selecting "Device Dependent" means that the Watch will use the font family defined for the user's device browser. This option is suitable for ensuring text consistency across different devices and browsers. The CSS font stack used typically includes a set of system fonts commonly supported across platforms.
Using this option supposes the watch to use the following code inside:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";Inherit Site Font Family
When "Inherit Site Font Family (Inherit)" is chosen, the Watch will inherit the font family defined in the HTML page where it is embedded. This option provides flexibility, allowing the Watch component to match the font style of the parent webpage seamlessly.
The following HTML code inside a site page will style the watch to use IBM Plex Sans font family.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'IBM Plex Sans';
}
</style>
