Designing your website > How to add custom fonts to your website in Create A Shoppe

How to add custom fonts to your website in Create A Shoppe

Want to use a font that perfectly matches your brand?

You can upload custom fonts directly inside the builder and use them across your entire website. Here’s how to do it step by step.


Before You Start

Breakdance only supports the following font formats:

  • .woff
  • .woff2

If your font is in another format (like .ttf or .otf) You’ll need to convert it first (don’t worry — it’s easy, we’ll show you below).


Step 1: Open a Page

  1. Log in to your website dashboard
  2. Go to Website > Pages
  3. Hover over any page
  4. Click Edit in Builder

👉 You can use any page; the font settings apply site-wide.


Step 2: Open Preferences

Once inside Builder:

  1. Look at the top of the screen
  2. Click Preferences

This opens your global builder settings.


Step 3: Go to Custom Fonts

Inside Preferences:

  1. Click Custom Fonts

This is where you’ll upload and manage your fonts.


Step 4: Upload Your Font

  1. Click Add Font (or similar button)
  2. Upload your .woff or .woff2 file
  3. Give your font a clear name

👉 If your font has multiple styles, upload each one:

  • Regular
  • Bold
  • Italic
  • Semi Bold

This ensures your text displays correctly across your site.


Step 5: Save Your Font

Make sure everything is saved.

Once saved, your font will now appear in your typography settings.


Step 6: Use Your Font on Your Website

To apply your new font:

  1. Click any text element (heading, paragraph, button, etc.)
  2. Go to Typography
  3. Find Font Family
  4. Select your custom font

💡 Pro Tip: Set It Globally

Instead of applying your font one by one:

  • Set it in your global typography settings

This keeps your entire website consistent and saves time.


How to Convert Fonts to WOFF or WOFF2

If your font isn’t in the correct format, you can convert it in just a few seconds.

Step-by-step:

  1. Go to CloudConvert WOFF Converter
  2. Click Select File
  3. Upload your font file (.ttf, .otf, etc.)
  4. Choose output format:
    • WOFF or WOFF2
  5. Click Convert
  6. Download your new file

Now you’re ready to upload it to the builder.


Best Practices

To keep your site looking clean and fast:

  • Stick to 1–2 fonts max
  • Only upload the styles you actually need
  • Use .woff2 when possible (smaller file size = faster site)
  • Keep your branding consistent

Troubleshooting

My font isn’t showing

Make sure:

  • It’s in .woff or .woff2 format
  • You saved after uploading

My font looks wrong

You may be missing a font weight (like bold or italic).

My site feels slow

Too many font files can slow things down. Try reducing variations.


Need Help?

If you get stuck, reach out to Create A Shoppe support. We’re happy to help.

People also viewed