Skip to main content

How to customize icons and fonts in the Designer

Written by ExpoFP Support
Updated yesterday

It'a possible to customize the style of icons that we use to mark different POIs. You can change their color, dimensions, and opacity the same way you do it with booths (on the Properties panel). Also, non-round icons have Line Cap and Line Join settings that let you change the style. Note that the same settings apply to any shape that consists of straight lines.

Line Cap

This setting defines how the ends of an open line are displayed.

  • Butt – the line ends exactly at the endpoint

  • Round – the line ends are rounded

  • Square – the line ends extend slightly past the endpoint with a square shape

Choose a line cap based on style and clarity. Use Round for smooth, friendly designs, and Butt or Square for technical or precise drawings.

Line Join

This setting is similar, and it defines how two line segments connect at a corner.

  • Miter – sharp, pointed corners

  • Round – rounded corners

  • Bevel – flat, cut-off corners


Use Miter for sharp angles, Round for softer shapes, and Bevel to avoid overly sharp or long corners.

How to customize font

To ensure a consistent and professional view of your event's floor plan, you can upload fonts associated with your brand. They can be displayed in the background text, booths and other spaces (the Oswald font is used by default).

Adjusting the text font on your floor plan can be done in the Designer . Follow these steps:

1. Add a text element to the floor plan

2. Choose the font from a drop-down list on the settings panel, or if you have a specific font you'd like to use, you can upload it directly from your computer. Click on the plus icon and select the font file.

How to add fonts to booths/spaces

The list of all supported fonts can be found here. Please note that any other custom fonts are not supported at the moment.

To change the booths/spaces font, go to the Floor plan settings.

  1. Click Add Custom CSS.

  2. Add the code:

@import url('https://fonts.googleapis.com/css2?family=FONTNAME&display=swap');
:root {
--expofp-font-face:"FONTNAME";
}

3. Replace FONTNAME after "family= and expofp-font-face:" with the font name you'd like to use and click Save.

Did this answer your question?