Skip to main content

Website Theme

Customize the visual appearance of your website with themes and typography.

Overview​

The Theme section allows you to choose from a variety of pre-built themes and customize typography to match your brand identity.

Where to go: Settings → Website → Theme

Theme Selection​

Choose from a wide variety of pre-built themes to change the color scheme and visual style of your website.

Available Themes​

  • Light - Clean, bright theme (default)
  • Cupcake - Soft, pastel colors
  • Bumblebee - Warm yellow and black
  • Emerald - Green and natural tones
  • Corporate - Professional blue and gray
  • Synthwave - Retro neon colors
  • Retro - Vintage color palette
  • Cyberpunk - Futuristic neon
  • Valentine - Pink and red romantic
  • Halloween - Orange and dark spooky
  • Garden - Natural green tones
  • Forest - Deep green and brown
  • Aqua - Blue and teal water theme
  • Lo-fi - Muted, relaxed colors
  • Pastel - Soft, light pastels
  • Fantasy - Magical purple tones
  • Wireframe - Minimalist grayscale
  • Black - Dark, high contrast
  • Luxury - Elegant gold and dark
  • Dracula - Dark purple theme
  • CMYK - Print-inspired colors
  • Autumn - Warm fall colors
  • Business - Professional and clean
  • Acid - Bright, vibrant colors
  • Lemonade - Fresh yellow and green
  • Night - Dark mode theme
  • Coffee - Warm brown tones
  • Winter - Cool blue and white
  • Dim - Soft, muted dark theme
  • Nord - Arctic blue theme
  • Sunset - Warm orange and pink

Typography​

Customize your website fonts to match your brand.

Google Font Family​

Setting: Google Font family name

Description: Enter the exact family name from Google Fonts.

Example: "Roboto", "Open Sans", "Montserrat", "Playfair Display"

How to find:

  1. Visit Google Fonts
  2. Browse or search for a font
  3. Click on the font
  4. Copy the exact "Family name" (not the CSS name)

Note: Leave blank to use the default Figtree font.

Google Fonts CSS URL​

Setting: Google Fonts CSS URL

Description: Paste the Google Fonts URL for custom fonts.

Format: https://fonts.googleapis.com/css2?family=FontName:ital,wght@0,300..900;1,300..900&display=swap

How to get:

  1. Visit Google Fonts
  2. Select your font
  3. Choose font weights and styles
  4. Copy the "@import" or <link> URL from the "Use on the web" section

Note: Leave blank to skip loading from Google Fonts (use local/system fonts).

Default Font​

Font: Figtree

Description: Figtree is used by default if no custom font is specified.

Note: The system automatically loads Figtree if no custom font is configured.

Publishing Changes​

After making changes to your theme or typography:

  1. Click "Publish" to save your changes
  2. Changes take effect immediately on your website
  3. Preview your website to see the changes

Best Practices​

  • Theme Selection: Choose a theme that matches your brand identity
  • Typography: Use fonts that are readable and professional
  • Consistency: Keep typography consistent across your website
  • Performance: Custom fonts may slightly increase page load time
  • Accessibility: Ensure sufficient contrast between text and background