Fix theme editor crash after importing a font

When you import a custom font through the Theme Editor, the editor may crash and display the following error:

TypeError: Cannot read properties of null (reading 'join')

This error can occur when the font import process fails to parse the font information correctly. It may happen when using Zoomforth's native file upload service or another font hosting provider.

To resolve the issue, remove the font that caused the error and either use a font from Google Fonts or import the custom font through CSS.

Option 1: Use a Google Font

If the font you need is available in Google Fonts, using it is the simplest alternative.

Open the Theme Editor.
Remove the imported font that caused the crash, if you can access the editor.
Select a font from the Google Fonts library.
Apply the font to your theme or style preset as needed.
Save your changes and preview your site.

If you need to use a custom font that isn't available in Google Fonts, follow Option 2.

Option 2: Import a Custom Font Using CSS

You’ll need a direct URL to your font file before proceeding. If you have a local copy of the font, such as an .otf, .ttf, or .eot file, you can upload it to Zoomforth Public Hosting to obtain a URL. Use the appropriate Public Hosting instructions for your account.

Open the Theme Editor for the theme you want to update.
Select Custom CSS in the left panel.
Copy the following CSS into the Custom CSS editor. Replace the placeholder values with your font's information.

@font-face {
font-family: "FONT NAME HERE";
font-weight: 400;
src: url("FONT URL HERE"); 
}

Replace the following placeholders:

FONT NAME HERE: The name you want to use for the font family.
FONT URL HERE: The direct URL of your font file.
font-weight: The weight supported by the font file. Use 400 for regular, 700 for bold, or 800 for extra bold, as applicable.

If you need multiple font weights, add a separate @font-face declaration for each available weight and use the corresponding font file URL.

4. Apply the Font to Your Text

The custom font imported through CSS will not appear in the Theme Editor's font dropdown. You must apply it manually using CSS.

Add the following code to the Custom CSS editor, replacing FONT NAME HERE with the exact font family name you used in Step 3.

p, h1, h2, h3, h4, h5, h6 {
font-family: "FONT NAME HERE" !important;
}

This example applies the font to paragraphs and headings from H1 through H6.

To apply the font only to specific text elements, remove the selectors you don't need. For example, to apply it only to paragraphs and H1 headings, use:

p, h1 {
font-family: "FONT NAME HERE" !important;
}

5. Click Done to save your changes.

6. Preview your site to confirm that the font loads and displays correctly.

Troubleshooting Tips

The font doesn't appear: Verify that the font URL is correct and accessible.
The font isn't applied: Make sure the font family name in the font-family declaration matches the name in your @font-face rule.
The font weight looks incorrect: Confirm that the font file supports the weight specified in your CSS.
The Theme Editor still crashes: Remove the problematic font import if possible and try using Google Fonts or the CSS method described above.

Note: Fonts imported through CSS won't appear in the Theme Editor's font dropdown. You must apply them using CSS wherever you want them to appear.

Need Help?

Contact Zoomforth Customer Support through the in-app chat or email support@zoomforth.com.