Search

Change your event's font using custom CSS

  • Updated

organizers_only.jpgBiz_Enter.png

If you want to customize the font used in your event, you can do that with the help of custom CSS. This option is available for Hopin Business and Enterprise plans.

Important: 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. 

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 > Branding, click Show advanced settings and scroll to the bottom of the page to the 'Custom CSS' field.

@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 > Branding page of your Event Dashboard.

Screenshot_2022-05-04_at_12.19.43.png

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

Notes:
  • In case your font are privately hosted and don't appear within Hopin event, please make sure your server settings are correct and allow to pull this information.
  • 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
  • Switching to a different color theme resets all color settings including the custom CSS each time. It will not be possible to access the applied customization when switching back to the theme used previously unless you save it as a custom color preset. Refer to Advanced Event Customization: How to change event colors and color theme  for more details.

 

Was this article helpful?