Imported font family through the theme editor creates an entry in the Font Family drop -down fields. Once created, the new font family is available for use in the theme and style preset variables. In some instances, adding a new font in the theme editor causes it to crash with the error message:
TypeError: Cannot read properties of null (reading 'join')
An error while attempting to import a font to the theme editor may happen when using our native file uploading service, as well as other font hosting providers. The font import may fail due to missing information during the parsing process.
To fix this issue, remove the imported font that causes the theme editor to crash, and use fonts in the Google Fonts library, or follow the steps below on how to import the font using CSS.
Pre-requisite : A ready Font URL to be used for font import. If you don't have a font URL, you can upload the local copy of the font file (e.g. .otf, .ttf, .eot) in our Public Hosting to get a URL.
Go to the Theme Editor.
Select Custom CSS in the left pane.
Copy the CSS Code below, replace the following attributes:
FONT NAME HERE = Font Family Name
FONT WEIGHT VALUES = either 400, 700, 800
FONT URL HERE = URL of the font to import
@font-face {
font-family: "FONT NAME HERE";
font-weight: FONT WEIGHT VALUES;
src: url("FONT URL HERE");
}
4. The imported font won't be seen in the Font dropdown of the Theme Editor, instead you have to copy and paste the CSS Code below in the Custom CSS Editor to callout the font in the theme. Make sure that you replace FONT NAME HERE value with the Font Family Name that had been used in Step 3.
p, h1, h2, h3, h4, h5, h6 {
font-family: "FONT NAME HERE" !important;
}
Note: The CSS Code above means that this font family will be used on all font sizes. If for example, you do not want to use the font family in H2 sized texts, then you just need to omit h2 from the CSS Code.
5. Insert the updated CSS Codes to line 1 of the Custom CSS Editor, the CSS Codes should look like the sample below.
6. Click the Done button to save the CSS Code.