Search

Changing font with custom CSS

  • Updated

organizers.jpg

You can customize your event venue font with the help of custom CSS. This guide provides steps and recommendations on how to change the font.

Important: The option to use custom CSS is not available on the legacy Starter plan. 
Note: Use custom CSS if you have a team member familiar with HTML and CSS, or a dedicated web designer. Custom CSS assistance falls outside the capabilities of the RingCentral Events Support team. 

To change the font in your event:

  1. If not using a web-safe font, put together a code to import your chosen custom font into your event:
    • Copy the @import rule as suggested by Google Fonts (free) or Adobe Fonts (paid). 
      @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    • Use the @font-face rule to input your own custom font. 
      @font-face {
      font-family: myFirstFont;
      src: url('https://page.net/fonts/myFirstFont.otf');
      }
  2. Use the font-family property and the * selector to target all elements.
    * {font-family: 'myFirstFont', sans-serif !important;}
  3. Go to Event Dashboard > Setup > Branding, click Show advanced settings and scroll all the way down to find the Custom CSS field.
  4. Paste both codes at the top of the Custom CSS field.
    Screenshot_2022-05-04_at_12.19.43.png
  5. Click Save.
  6. Preview your event to make sure the font has been successfully applied to your event venue.
Notes:
  • In case your fonts are privately hosted and don't appear within 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 landing page. However, if you're using advanced landing page layout, you can select a different font or import a custom font file in the editor: Advanced landing page: Using custom fonts
  • Switching to a different color theme resets all color settings including the custom CSS. It will not be possible to access the applied customization when switching back to the previously used theme unless you save it as a custom color preset. Refer to Changing event colors and color theme  for more details.

 

Was this article helpful?