All Collections
Adding content & design
Add a Google Font
Add a Google Font

Add a Google font to use it on your event site.

E
Written by Elsa Glemme
Updated over a week ago

You can use our custom CSS-function to add a Google font on your event site, by following these steps:

  1. Go to https://fonts.google.com/

  2. Choose the font that you want and copy the link under @import

  3. Go to Confetti and open your event

  4. Click on `Pages`

  5. Click on `Design`

  6. Scroll to the bottom of the event site and click `Edit CSS`

  7. Paste the link at the top of the CSS field and remove <style> and </style> at the beginning and end of the code snippet.

  8. Then paste this code:

    :root {
      --font-family-base: 'Name of the font';
    }

  9. Fill in the name of your chosen font instead of the text Name of the font

  10. Click on `Save`

Here is an example of how the CSS code looks if you have chosen the Google font called "Fuggles":

@import url('https://fonts.googleapis.com/css2?family=Fuggles&display=swap');

:root {
  --font-family-base: 'Fuggles';
}

These CSS variables are also available: 

--font-family-heading (default samma som --font-family–base) 
--font-base-size 
--font-large-size 
--font-large-weight 
--font-large-family (default samma som --font-family-heading) 
--font-medium-size 
--font-medium-weight 
--font-medium-family (default samma som --font-family-heading)

If you have a Business account and want to use your own font on your event site, contact our support and we can help you.

Please NOTE that we do not offer support to solve issues regarding your own, custom CSS, so if you don't know how to fix any problems that can arise with it, don't use a lot of it.

Did this answer your question?