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.

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.

    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 @import.

    2. Highlight from the @ symbol to the semicolon (;), being sure to exclude the semicolon. Keep your Google Fonts tab open.

      change_font_css.png

    3. Paste this into the Custom CSS field on your Hopin event.

    Design-Hopin.png

    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'.

    Fredoka-Google-Fonts.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: 'Fredoka', sans-serif; !important;}

    final_css.png

    1. Click Save. Check out your shiny new font by clicking Preview event at the top right of your browser.
    Note: Changing font doesn't affect the text displayed on the Registration page. 
  • @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.

    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.

    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.

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

Was this article helpful?