When your custom font in Showit won’t go bold, it can throw off the whole vibe of your website. Custom fonts are a brilliant way to add personality to your design, but they don’t always play nice when it comes to styling. If you’ve tried selecting “bold” and nothing happens, don’t worry—you’re not stuck. This step-by-step guide will show you exactly how to fix it using a bit of custom CSS magic.

Why Custom Fonts Sometimes Ignore Bold Styling

Custom fonts in Showit can be a game-changer for creating a unique look, but they’re not always plug-and-play. When a custom font doesn’t respond to the bold option, it’s usually because the font file you uploaded doesn’t include a bold weight. Unlike Google Fonts, which often come with multiple styles (like bold, italic, and light), custom fonts need those styles uploaded separately.

Without a specific bold weight in the font file, your browser can’t just “fake it” for you—it’s a bit like asking someone to dance without teaching them the moves first. But don’t worry, this is where a little custom CSS can save the day.

Step 1: Check If Your Font Has a Bold Weight

Before diving into CSS, it’s important to confirm whether your custom font actually includes a bold weight. Not all custom fonts come with multiple styles like bold or italic—some are designed as a single weight.

Here’s how to check:

• Visit the source where you purchased or downloaded the font.
• Look for a description of the font family that mentions weights like Regular, Bold, or Semi-Bold.
• If you don’t see any bold versions listed, you may need to purchase or download them separately.

If your font does include bold weights, great—you’re ready to upload them to Showit and get styling!

What if your font doesn’t offer other weights? No worries—you can still fake it by tweaking the font’s thickness with CSS. It won’t be identical to a true bold weight, but it’ll get you close.

Step 2: Upload the Bold Font File

Once you’ve confirmed your custom font includes a bold weight, the next step is to upload it to Showit. Adding this file ensures your bold text has a proper style to pull from.

Here’s how to do it:

1. Go to your Showit Media Library.
2. Click the Upload button and select your bold font file (e.g., FontName-Bold.woff).
3. Once uploaded, click on the file to copy the URL—this will come in handy later when adding custom CSS.

With the bold font file uploaded, you’re ready to set it up with some custom code.

For my Single-Weight Font Showiteers? Don’t panic! You can still create the appearance of bold text with a CSS workaround, which we’ll cover in the upcoming steps.

Step 3: Add Custom CSS in Showit

Now that your bold font file is uploaded, it’s time to add custom CSS to make it work on your site. This step connects your font file to the “Bold” option in Showit’s text editor.

Here’s how to do it:

1. Open your Showit site and click the three-dot menu in the top-right corner.
2. Select Advanced Settings, then navigate to the Custom Head HTML section.
3. Paste the following CSS into the box:

@font-face {
  font-family: 'FontName';
  src: url('https://your-regular-font-url.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'FontName';
  src: url('https://your-bold-font-url.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

strong, b {
  font-family: 'FontName';
  font-weight: 700;
}
  

4. Replace https://your-regular-font-url.woff and https://your-bold-font-url.woff with the exact URLs of your uploaded font files from the Showit Media Library.
5. Save your changes and refresh your site.

With this in place, your custom font will apply its bold style whenever you select “Bold” in Showit’s text editor.

What to Do If Your Custom Font Doesn’t Have a Bold Weight

No bold weight? No problem. While it’s always best to use a dedicated bold font file for the cleanest results, you can fake the bold look using CSS by increasing the font’s thickness. It’s not perfect, but it’ll give your text a little extra oomph.

Here’s how to do it:

1. Go to the Custom Head HTML section in Showit (same steps as before).
2. Add this CSS to your existing code:

strong, b {
  font-family: 'FontName';
  font-weight: 900; /* Adjust as needed */
  -webkit-text-stroke: 0.5px; /* Adds extra thickness */
  text-shadow: 0.5px 0.5px 0px rgba(0, 0, 0, 0.1); /* Creates a bold effect */
}
  

3. Replace 'FontName' with the name of your custom font as it’s listed in your CSS.
4. Save your changes and refresh your site to see the effect.

Pro Tip: The -webkit-text-stroke and text-shadow properties give a faux-bold appearance, but use them sparingly—overdoing it can make your text look messy or uneven.

While this workaround won’t match the precision of a true bold font, it’s a great solution for fonts that are limited to a single weight.

Why Stop at Bold?

While bold text can make a statement, pairing it with italics or other styles adds even more flexibility to your font game. If your custom font includes an italic version (or other weights), you can easily add those options to Showit with CSS.

Follow these steps to include italic and bold-italic variations of your font:

1. Upload Italic and Bold-Italic Files
   Just like with the bold file, upload the italic (FontName-Italic.woff) and bold-italic (FontName-BoldItalic.woff) font files to your Showit Media Library.
2. Update Your Custom CSS
   Add the following CSS to the Custom Head HTML section in Showit:

@font-face {
  font-family: 'FontName';
  src: url('https://your-regular-font-url.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'FontName';
  src: url('https://your-bold-font-url.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'FontName';
  src: url('https://your-italic-font-url.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'FontName';
  src: url('https://your-bold-italic-font-url.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

/* Styling Rules */
strong {
  font-family: 'FontName';
  font-weight: 700;
}

em {
  font-family: 'FontName';
  font-style: italic;
}

strong em, em strong {
  font-family: 'FontName';
  font-weight: 700;
  font-style: italic;
}
  

Ready to Level Up Your Showit Site?

Custom fonts are just the start of creating a website that truly feels like you. With these CSS tips, you’re not only adding bold and italic styles—you’re giving your site that extra layer of polish and personality it deserves.

If you’re feeling inspired but need a little extra guidance, I’ve got your back. Whether it’s fine-tuning your Showit design or crafting a site that stops the scroll, let’s make it happen together.

Get in touch today, and let’s turn your ideas into something stunning.