Using fonts
You can select the font you want to use for the runner. This works by setting the font
property of the styles
object. The font can load from 3 different sources:
🗛 Use a regular font
Use one of the following regular fonts that are supported by most browsers:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Garamond
- Helvetica
- Impact
- Palatino
- Sans-Serif
- Times New Roman
- Trebuchet MS
- Verdana
- Autoscroll
- Chat
- Classic
import { run } from "@tripetto/runner-autoscroll";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
family: "Arial"
}
}
});
import { run } from "@tripetto/runner-chat";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
family: "Arial"
}
}
});
import { run } from "@tripetto/runner-classic";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
family: "Arial"
}
}
});
🌍 Use a Google font
If you use any other font family name than the regular ones listed above, the font tries to load from Google Fonts. So, you can search for a nice font on Google Fonts and use it in the runner. Make sure to copy the exact name of the font you want to use. The font name is case-sensitive.
- Autoscroll
- Chat
- Classic
import { run } from "@tripetto/runner-autoscroll";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
// This font will load from Google Fonts
family: "Poppins"
}
}
});
import { run } from "@tripetto/runner-chat";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
// This font will load from Google Fonts
family: "Poppins"
}
}
});
import { run } from "@tripetto/runner-classic";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
// This font will load from Google Fonts
family: "Poppins"
}
}
});
👩💻 Use a custom font
Another option is to host the font on a custom domain. To do this, you need to create a font CSS file that specifies the required fonts for the runner.
Create the font CSS file
Create the font CSS file and host it together with the font files on a custom domain. An example my-font.css
might look something like this:
@font-face {
font-family: 'My Font';
font-style: normal;
font-weight: normal; /* or 400 */
src: url("my_font_regular.woff") format("woff");
}
@font-face {
font-family: 'My Font';
font-style: italic;
font-weight: normal; /* or 400 */
src: url("my_font_italic.woff") format("woff");
}
@font-face {
font-family: 'My Font';
font-style: normal;
font-weight: bold; /* or 700 */
src: url("my_font_bold.woff") format("woff");
}
@font-face {
font-family: 'My Font';
font-style: italic;
font-weight: bold; /* or 700 */
src: url("my_font_bold_italic.woff") format("woff");
}
The runner uses font-weight
400 for regular text and font-weight
700 for bold text. Also, the runner supports italic text. So that should be defined as well for both font weights.
Load the font CSS file
When you have created the CSS file, you can configure the runner to use it. To do so, you need to specify the URL to the font CSS file. Append that URL with a hash sign #
, followed by the name of the font. This allows the font loader to load the font CSS file and then use the font with the given name.
- Autoscroll
- Chat
- Classic
import { run } from "@tripetto/runner-autoscroll";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
family: "https://yourdomain.com/my-font.css#My%20Font"
}
}
});
import { run } from "@tripetto/runner-chat";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
family: "https://yourdomain.com/my-font.css#My%20Font"
}
}
});
import { run } from "@tripetto/runner-classic";
run({
definition: /* Supply your form definition here */,
styles: {
font: {
family: "https://yourdomain.com/my-font.css#My%20Font"
}
}
});
You can specify a relative path to the font CSS file instead of an absolute URL as long as you start it with a forward slash /
. For example, /my-font.css#My%20Font
.
Make sure to apply proper URL encoding for the font name in the URL. Spaces, for example, should be written as %20
. You can use an online URL encoder to do this. Also, the font name is case sensitive.
If you specify an absolute URL it should always use https://
. Unsecure HTTP requests are only supported when using a relative path to the font CSS file (this requires that the runner and font CSS file are on the same domain).
📖 Reference
- Autoscroll
- Chat
- Classic
Have a look at the complete autoscroll runner API reference for detailed documentation. In the examples above, the following symbols were used:
Have a look at the complete chat runner API reference for detailed documentation. In the examples above, the following symbols were used:
Have a look at the complete classic runner API reference for detailed documentation. In the examples above, the following symbols were used: