From 39ffaf95e83422865ee64c29156eb3fc02ec0e8d Mon Sep 17 00:00:00 2001 From: Adeola Adeyemo Date: Mon, 14 Apr 2025 12:11:51 +0100 Subject: [PATCH 1/2] update: add example for multiple fonts Signed-off-by: Adeola Adeyemo --- docs/journeys/custom-css.md | 38 +++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/journeys/custom-css.md b/docs/journeys/custom-css.md index 787ebd31..edbe1dd5 100644 --- a/docs/journeys/custom-css.md +++ b/docs/journeys/custom-css.md @@ -487,6 +487,44 @@ The snippet below will change the maximum width of the journey content to 600px } ``` +### Use multiple fonts on a journey + +To do this, you can either use a standard font (provided on the Design builder) or a custom font (that has been uploaded). + +The former is visible only in the list of options in the Font selector, while the latter is visible in the Font selector and on the list of Fonts below the Fonts selector in the Design Builder. + +The snippet below will use a standard and custom font on the Journey. Things to note: + +- There is a difference between the two font urls below. +- The organization ID is used in the custom font URL. Replace `{ORGANIZATION_ID}` with your organization ID. Please contact support if you don't know your organization ID. + +```css +/* Standard font */ +@font-face { + font-family: 'NotoSans-Regular'; + src: url('https://go.epilot.cloud/element-static/fonts/NotoSans-Regular.ttf'); + font-weight: normal; + font-style: normal; +} + +/* Custom font */ +@font-face { + font-family: 'TitilliumWeb-Bold'; + src: url('https://go.epilot.cloud/designs/{ORGANIZATION_ID}/font/TitilliumWeb-Bold.ttf'); + font-weight: normal; + font-style: normal; +} + +/* Examples of usages */ +.Concorde-BlockHeading__Title { + font-family: 'NotoSans-Regular', sans-serif; +} + +.Concorde-BlockHeading__Title { + font-family: 'TitilliumWeb-Bold', sans-serif; +} +``` + ## Conclusion Custom CSS in Project Concorde provides a powerful way to create unique, branded experiences. With the ability to apply global, journey, step, and block-level styles, you have the flexibility to fully control your design without compromising the integrity of the base system. From 948412bb747996e9193c04c233c03d7a37770016 Mon Sep 17 00:00:00 2001 From: Adeola Adeyemo Date: Mon, 14 Apr 2025 12:13:40 +0100 Subject: [PATCH 2/2] chore: update section Signed-off-by: Adeola Adeyemo --- docs/journeys/custom-css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/journeys/custom-css.md b/docs/journeys/custom-css.md index edbe1dd5..1806497c 100644 --- a/docs/journeys/custom-css.md +++ b/docs/journeys/custom-css.md @@ -489,11 +489,11 @@ The snippet below will change the maximum width of the journey content to 600px ### Use multiple fonts on a journey -To do this, you can either use a standard font (provided on the Design builder) or a custom font (that has been uploaded). +To do this, you can either use a standard font (provided on the Design builder) or a custom font (that has been uploaded). To use a custom font, you can either upload it on the design builder or use a hosted font. The former is visible only in the list of options in the Font selector, while the latter is visible in the Font selector and on the list of Fonts below the Fonts selector in the Design Builder. -The snippet below will use a standard and custom font on the Journey. Things to note: +The snippet below will use a standard and custom font (uploaded) on the Journey. Things to note: - There is a difference between the two font urls below. - The organization ID is used in the custom font URL. Replace `{ORGANIZATION_ID}` with your organization ID. Please contact support if you don't know your organization ID.