Change your event's font using custom CSS

  • Updated

Biz_Enter.png

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.

When you're ready to customize your event's font, follow the below steps.

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

  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 dashboard of the event you want to brand and select Setup > Theme, click 'Show advanced settings' and scroll to the bottom of the page to 'Custom CSS'.

Screen_Shot_2020-07-28_at_4.37.44_PM__1_.png

  1. If you're using Google Fonts, once you've selected your font, click 'Select this style'. In the window that opens to the right, click 'Embed' then click '@import'. Highlight from the @ symbol to the semicolon (;). Keep your Google Fonts tab open.

    Screen_Shot_2020-07-28_at_4.43.57_PM.png

  2. Example of what code to copy from Google Fonts

Screen_Shot_2020-07-28_at_5.11.52_PM.png

  1. Back in Google Fonts, copy all the text under the section 'CSS rules to specify families'.

Screen_Shot_2020-07-28_at_5.13.34_PM.png

  1. Finally, return to the 'Custom CSS' box in the dashboard of your Hopin event. Paste the code from Google Fonts, and add some additional code:

    * { font-family: 'Roboto', sans-serif; }

change_font_code.png

  1. Click 'Save'. Check out your shiny new font by clicking 'Preview' at the top right of your browser.

Note: Changing font doesn't affect the text displayed on the Registration page. 

 

Feel free to reach out to us at support@hopin.com in case you have questions or need assistance.

Was this article helpful?