Change your event's font using custom CSS

If you want to customize the font used in your event, add advanced branding to your Hopin contract (contact your sales rep if you don't have this included already). This option is included in our Pro, Business, and Enterprise plans.

Note: This feature is only recommended for orgs that have a member of the team who is familiar with CSS code. The Hopin team are unable to help with design and branding requests.

Note: This will only affect the font within your event, and not the registration page.

When you're ready to customize your event's font, select a tab based on if you are using a privately or publicly hosted font.

Note: Hopin's custom CSS works in American English (e.g.: color, not colour).

1. Ensure your custom font is hosted on a public site, or select a font from Google Fonts (free) or Adobe Fonts (paid).
2. Once advanced branding is available for your Organization, navigate to the event you want to brand go to your Event Dashboard > Setup > Theme, click Show advanced settings and scroll to the bottom of the page to the 'Custom CSS' field.
1. Copy the code to embed your font. For example, if you're using Google Fonts, you will need to select a font on the website (it can be sone by clicking on the plus icon next to the font style) and then click on the icon in the top right corner to view the selected families. In the right side panel, you'll see the selected font(s). Click @import.
2. Highlight and copy the code from the @ symbol to the semicolon (;), being sure to include the semicolon. You don't need to copy the style tags. Keep your Google Fonts tab open.
3. Paste this into the Custom CSS field on your Hopin event. Make sure to keep this code at the top of the box. All other custom CSS should be added below.
1. Back in Google Fonts, scroll down the panel on the right hand side and copy all the text under the section 'CSS rules to specify families'. This is a CSS declaration for the selected font(s).
1. Finally, return to the 'Custom CSS' box in the dashboard of your Hopin event. Paste the declaration from Google Fonts and add some additional CSS syntax to complete the code. "*" is a selector that targets all elements, so it would basically target all text in the online event venue. You will also need to add curly braces {} and add the "!important" attribute. It should look like this:
```
* {font-family: 'Montserrat', sans-serif !important;}
```
1. Click Save. Check out your shiny new font by clicking Preview event at the top right of your browser.
Note: Changing font with this code doesn't affect the text displayed on the Registration page. However, if you're using Canvas registration page, you can select a different font or import a custom font file in the Canvas editor: How to use Custom Fonts in Canvas
@font-face is a CSS rule that allows you to input your own font to appear on a website even when the particular font is not installed on the visitor's computer.

1. First, define a name for the font (e.g. myFirstFont), and then point to the font file. for example:
```
@font-face {
font-family: myFirstFont;
src: url('https://page.net/fonts/myFirstFont.otf');
}
```
2. Make sure you assign the font to all of the text that appears within your event, as in the example below:
```
* {font-family: 'myFirstFont', sans-serif !important;}
```
3. Paste both codes at the top of the Custom CSS box, on the Setup>Theme page of your Event Dashboard.

4. Click Save. Check out your new font by clicking Preview event at the top right of your browser.

Note: In case your font are privately hosted and don't appear within Hopin event, please make sure your sever settings are correct and allow to pull this information.

Note: Changing font with this code doesn't affect the text displayed on the Registration page. However, if you're using Canvas registration page, you can select a different font or import a custom font file in the Canvas editor: How to use Custom Fonts in Canvas