# Image Editor Settings

## Image Editor Settings Overview

Image Editor Settings allow administrators to configure standardized resources within the image editing tool, which is particularly useful for managing designs for user groups required to work with templates (These are users whose settings are configured as **SETTING. Must use Image Editor Templates.**)

⚠️ **User Right Required:** User must have the permission: **“Is Client Admin - User can manage the Client Profile”.**

The core components include:

* **Data Source Management:** This feature allows you to provide predefined data sources for the entire account. It enables users to quickly apply consistent and accurate values when editing templates, eliminating the need for manual data entry.
* **Font Asset Integration:** Linked font assets are made available to all users with permission to access the Image Editor.
  * **Font Weight Customization**: Using the "Font Weight" slider, admins can assign specific weights to each font file or URL based on the selected font family.
  * **Smart Auto-matching:** To ensure a seamless design experience, the editor automatically matches fonts to the closest available weight if an exact match is not found.

<details>

<summary>You should enable the <strong>Image Editor Settings</strong>, if you want to:</summary>

* Enable admins to **standardize data and fonts used** within templates.
* Reduce display errors (e.g., missing fonts, incorrect content).
* Accelerate the design process for users.
* Help admins maintain easier control over content.

</details>

<figure><img src="/files/ivDxXMWoNJO5qCmngySJ" alt=""><figcaption></figcaption></figure>

## How to use Data Source

### What is a Data Source?

The **Data Source** feature allows you to provide predefined **data sources for the entire Account,** helping users apply consistent values quickly when editing templates in the Editor. **Data Sources** provide predefined values to:

* Use in **Text Layers** with dropdown type.
* Use in **Image Layers** with dropdown type.

👉 This allows:

* Users to **select values from a predefined list,** avoiding manual entry errors.
* **Consistent values across all templates in the Account.**

### How to add a Data Source

#### **🔹 Step 1:** Navigate to **Image Editor Settings**&#x20;

* Go to **Client Profile → Settings** → **Image Editor Settings** (previously known as Template Settings)
* Inside this section, you will find: **Data Source**

<figure><img src="/files/yexUWy9FbkjeQJ8oUvLJ" alt=""><figcaption></figcaption></figure>

#### **🔹 Step 2:** **Add Data Source**

* Click **“Add Data Source”** to create a new data source.
* Enter the following information
  * **Data Source Name**: to identify it easily when using in templates.
  * **Values**: list of values you want to provide for the dropdown.
* You can create multiple data sources as needed (e.g., branch locations, brand names, brand guideline colors, contact lists, etc.).

<figure><img src="/files/r95UaQy4IIVosIuVhIU4" alt=""><figcaption></figcaption></figure>

### How to use Data Sources in the Editor

When editing a Template:

**🔹 Step 1: Open the Template in the HIVO Editor**

* Select the template you wish to modify.

**🔹 Step 2: Select the data input Type (Data Source)**

* Go to **Design tab ->** For **Text Layers** or **Image Layers ->** Select **Type: Data Source**.&#x20;
* When you click on a Text Layer or Image Layer that is linked to a Data Source, instead of a regular input field, you'll see a dropdown menu.
* This list will display all the values defined in the relevant Data Source.

<figure><img src="/files/ALnrd9y3kpEQC6AfRZaD" alt=""><figcaption></figcaption></figure>

**🔹 Step 3:  Select the desired value**

* Simply click the dropdown arrow and choose the appropriate value from the list.
* The content of the text or image layer will automatically update with your selected value.

<figure><img src="/files/FLxaBwNJcukCuSkqBaAr" alt=""><figcaption></figcaption></figure>

## How to set up Available Fonts

**Available Fonts** is a feature that allows administrators to centrally manage all fonts used in the Image Editor at the Client level.

* With **Available Fonts**, all fonts are now managed in one dedicated location. This removes the dependency on Brand Fonts, simplifies setup, reduces rendering issues, and gives administrators better visibility when fonts are missing or incorrectly configured.
* This feature becomes the **single source of truth** for all fonts used in the Image Editor.

The **Font Family** name must exactly match the font used in the original design file, including imported Adobe files and existing templates.

Any font asset linked inside *Available Fonts becomes **available to all users who have permission to access the Image Editor.***

### **Where to Find It**

* Go to: **Client Profile → Settings → Image Editor Settings** (previously known as Template Settings)
* Inside this section, you will find: **Available Fonts**

<figure><img src="/files/wMg7J1natLhkDaKU3hPi" alt=""><figcaption></figcaption></figure>

### Font Configuration

Available Fonts is built as a list of font entries, where each entry represents a font family used in the Image Editor.

For every font entry, administrators must configure:

* **Font Family** (required)
* **Font Source** (required)
* **Font Weight** (required, default is 400)

### 1. Font Family

This is the main font name used by the Image Editor and must exactly match the font family used in the original design file, such as Adobe templates or imported assets. If the Font Family does not match exactly, the font may not render correctly. For examples:

* Outfit
* Helvetica Neue
* Montserrat

Adding font families supports three main methods (see details below):

<table data-view="cards"><thead><tr><th></th></tr></thead><tbody><tr><td><h4>Manually adding new fonts</h4></td></tr><tr><td><h4>Importing existing fonts from Brands</h4></td></tr><tr><td><h4>Loading missing fonts detected from templates</h4></td></tr></tbody></table>

### 2. Font Source

Each font must have a source so the system knows where to load the font from. There are two supported source types:

* **HIVO Asset** - a font file uploaded and stored inside HIVO
* **Font URL** - an externally hosted font link, such as Google Fonts or a company CDN

In the Font Source section, users can turn the toggle on or off to switch between font source options.

#### **🔹** Add Fonts Using HIVO Assets

You can upload font files directly into HIVO and link them inside Available Fonts.&#x20;

* This is the recommended approach when you want centralized font management, stronger access control, and better consistency across templates.
* This is especially useful for proprietary fonts, internal brand fonts, or any font files your team wants to manage directly within the system.

<figure><img src="/files/rCYXSMgn2f0peLSwDcrN" alt=""><figcaption></figcaption></figure>

#### **🔹** Add Fonts Using Font URL

* You can also link fonts using externally hosted Font URLs. This is useful when fonts are already managed outside of HIVO through platforms such as Google Fonts, CDNs, internal servers, or enterprise font libraries.
* Even when using a URL, you still need to define the Font Family and Font Weight so the system can properly map the font to imported templates.&#x20;

<figure><img src="/files/QkOvtVUbR3T8ldctrScC" alt=""><figcaption></figcaption></figure>

### 3. Font Weight

Font Weight is used to distinguish multiple font files under the same Font Family.

* This is especially important when one font family has several variations such as Light, Regular, Medium, or Bold. The default Font Weight is **400**.

<figure><img src="/files/MnYpujbjvIEd7JlnRkR5" alt=""><figcaption></figcaption></figure>

* In the Font Weight section, users can drag the dot on the Font Weight slider to adjust the font thickness.

<figure><img src="/files/tJ9qnCWFZqbTJ2QxkzJB" alt=""><figcaption></figcaption></figure>

⚠️  ***If the same font has the same font weights, the system will notify.***

<figure><img src="/files/mOWuXRu8Ulph0Y4M7LAO" alt=""><figcaption></figcaption></figure>

### 👉 3 methods to add Font Family

#### **🔹** Method 1: Manually Adding new Font&#x20;

<figure><img src="/files/mF3vQPYa4mxqUoqZ8bLt" alt=""><figcaption></figcaption></figure>

#### ⚠️  **Avoiding Duplicate Font Entries**

If you add a font and the same **Font Family** already exists in Available Fonts, the system will not create a duplicate entry.

Instead, it will automatically switch to **Add Source for Another Weight Range**.

For example:

* if **Outfit** already exists with: Outfit Regular → weight 400
* and if you're trying to enter the new font family name as outfit
* Then, the system will automatically treat this as another source under the existing Outfit family rather than creating a second separate entry.

This keeps font management cleaner and improves rendering consistency.

#### **🔹** Method 2: Import fonts from Brands

To support migration from the previous Brand Font setup, administrators can import fonts directly from existing Brand Fonts into Available Fonts.

Admins can manually re-import fonts from Brands whenever needed, such as when:

* new fonts are added to a Brand later
* older fonts need to be re-synced
* admins want to reduce manual configuration work

> This is not a continuous automatic sync. Changes made to Brand Fonts after migration will not automatically update Available Fonts unless manually imported.

#### **🔹 Method 3: Load** Missing Fonts from Templates

If a template contains a font that does not yet exist in Available Fonts, administrators can use the **Import Missing Fonts** tool.

* This tool scans all templates and detects font families that are missing from Available Fonts.
* Instead of fully configuring the font automatically, the system only creates placeholder entries for those missing fonts.
* At this stage, the fonts are not yet ready for use. Admins must manually complete the setup by assigning **a HIVO Asset or a Font URL,** and reviewing it before saving:
  * Font Family
  * Font Weight

⚠️  If no source is assigned, the font will not be linked and the template may continue showing rendering issues.

#### **🔹** Warning Banner for Missing Fonts (Admin Only)

If a template contains fonts that do not have a linked asset or Font URL, administrators will see a yellow warning banner inside the Image Editor.

<figure><img src="/files/AUxSQTRAZnF0qygXmrzk" alt=""><figcaption></figcaption></figure>

The warning will display:

* **the list of affected fonts**
* **a shortcut** to open **Available Fonts settings**

👉 This helps admins quickly identify missing fonts and resolve rendering issues before they affect other users.

If you have any questions, don't hesitate to ask, we're always here to help!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://support.hivo.co/client-profile/client-profile-settings/asset-and-metadata-management/image-editor-settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.