Skip to main content
All CollectionsCSS StylingVirtual Booth
CSS font change for Virtual Booth
CSS font change for Virtual Booth

How to change the font on your Virtual booth.

Nicholas avatar
Written by Nicholas
Updated over a week ago

If you want to edit the font within your virtual event, follow the steps below very closely. *This method only supports Google Fonts, which are well-supported and will work on almost all browsers.


First, we will go to https://fonts.google.com/, select or search for the font you want, click on it and then choose the "Get Font" option.

​

Next, we will select the "Get Embed Code."

​​

Once Embed Code is selected, you will get two embed codes: one is the Embed code, and the second is CSS.


Now, let's add the two codes to the Virtual Booth.

​Go to the event Virtual Booth settings Tab and Select Edit.

Next, Scroll down to the bottom of the page and select "Live Editor"

Inside Live Editor, we can see CSS and Javascript tabs.

From here, we will first copy the CSS class from Google Fonts.

Just so you know, the note is to use (*), as shown in the example image.

(*) - Will make sure that the selected Font is used across the Virtual Booth

* {
font-family: "Matemasie", sans-serif;
font-weight: 400;
font-style: normal;
}

We will now paste it into the CSS field in the Live Editor. It should look similar to the screenshot below.

The next step is to copy the Embed Code from Google Fonts.

And then, we will paste it as is to Javascript.

Did this answer your question?