# Custom Fonts

**Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team."

## Custom fonts in Vitara Charts <a href="#custom-fonts-in-vitara-charts" id="custom-fonts-in-vitara-charts"></a>

Vitara Charts can display text, such as axes labels, data labels, or tooltips, in the text font styles specified by the customer. The processes for deploying custom fonts in Vitara charts are outlined below.

### **Step 1:**

Copy the font file into the following path:

```
VitaraCharts\style\v535197\font
```

### **Step 2:**

Open customStyles.css file, which will be in the following path " **plugins\VitaraCharts\custom"**

### **Step 3:**

Uncomment the “@font-face” container by deleting the text /\*\* (in first line) and the text \*\*/ (in the line number seven)

### **Step 4:**

Delete the entire text in the second line: “Uncomment to introduce new font-family and make it available”.

### **Step 5:**

Replace “font-family” with the name of the font you want to add. If your font name contains spaces, use quotation marks at the beginning and end of the name. For instance, ““Frutiger 45 Light.”

### **Step 6:**

In src:url line copy the path of the folder in which we copied the font file.

In the below example Hokjesgeest font is deployed.

```
@font-face {
            font-family: Hokjesgeest;
            src: url(../style/v430559/font/Hokjesgeest.ttf);
           }
```

Another example which has spaces in the font name:

```
@font-face {
            font-family: "Frutiger 45 Light";
            src: url("../style/v430559/font/Frutiger 45 Light.ttf");
           }
```

### **Step 7:**

If you want to add multiple custom fonts, then define font family for each custom font.

```
@font-face {
            font-family: fontello;
            src: url(../style/v430559/font/fontello.ttf);
           }
```

### **Step 8:**

List all the custom fonts names in the font vitara-chart-container.

```
.vitara .vitara-chart-container
{
	font-family:Hokjesgeest, fontello, "Frutiger 45 Light", Arial, Helvetica,
	Verdana, sans-serif !important;
}
```

Below is the screenshot of the updated “customStyle.css” file.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FAzrezObBzBUw9Gw9RQoD%2Fimage.png?alt=media&#x26;token=ebf58afb-d356-4260-8153-70c9d59b57a7" alt=""><figcaption></figcaption></figure>

## **Steps to show the custom fonts in the font-family dropdowns in property editor and set a particular font as default font.**

### **Step 1:**

Open the file named **global.txt** in the following path, \
\
**plugins\VitaraCharts\custom**\
In this file, you can find fields named font.customFonts and font.defaultFont

### **Step 2:**

Include all the custom fonts specified in the font.customFonts key, each one separated by a comma (,). For example,

```
font.customFonts=OpenSans, Hokjesgeest, Frutiger 45 Light
```

### **Step 3 (Custom font by default across all charts):**

To set a font as default font for all charts, set the font.defaultFont key. For example,

```
font.defaultFont=Hokjesgeest
```

or

```
font.defaultFont=Frutiger 45 Light
```

Refresh your web browser and open Vitara Charts. Below is the screenshot of the custom font in the Vitara chart.

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FrY5TlQ2wV4dTBqvg4nuG%2Fimage.png?alt=media&#x26;token=61353cb8-da6a-4314-a2cf-59f11be07eb5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FNaeCGtMRZtwYODIoMmh2%2Fimage.png?alt=media&#x26;token=cd43a4cc-fa5a-46b3-b29a-a69936b562ba" alt=""><figcaption></figcaption></figure>


---

# 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://tsdocs.vitaracharts.com/customization-guide/custom-fonts.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.