# Adding your own Google Fonts

{% hint style="info" %}
With the release of 1.12, we introduced an array of new Google Fonts to expand our available styling options. With this, we will soon implement the ability to manage, and add your own fonts! In the meantime, if you do need to add your own font, you can do this using the following steps.
{% endhint %}

Here’s what you need to do:

**Locate the Font you want:**

1. In a browser, search for and open [Google Fonts](https://fonts.google.com/)
2. Locate the fonts you would like and add them to the “Selected Families Panel”
3. Once that is done, view the Selected Families and select any of the fonts - you will see a menu appear
4. Scroll to find the **Use on the web** section
5. In the HTML below, highlight the indicated area (see below) and copy (Ctrl+C) - you will need this later.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FfPeDuzVXIM60ca3Bq9uL%2FFontsList_GoogleFonts.png?alt=media&#x26;token=fea0aac9-de21-4328-959e-f98230b99929" alt=""><figcaption></figcaption></figure>

Now we need to locate the file where we will insert our new fonts.

**For Windows:**

1. Ensure all instances of Squirrel are closed and not running. You can check this by looking in the Task Manager
2. Find any JSON/ text editing tool (such as Notepad) and “**Run as administrator**”.
3. Select File > Open and navigate to the following location\
   C:\Program Files (x86)\InfoSol\Squirrel\resources\app\assets
4. Locate a file named “externalFontList.json” and select Open - you may need to expand the bottom-right drop-down and select “All Files” to see it

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FaLxQlPL9ENDXXzNs1EvM%2FFontsList_TextFiles.png?alt=media&#x26;token=302a5f2e-6e02-4528-999f-0adfe5f75d1f" alt=""><figcaption></figcaption></figure>

1. Once open you will see a series of HTML code
2. On the last item in the list, in the end, enter a comma to add a new item to the array. Press return and enter the following\
   \
   { "text": "**font-name**", "fontFamily": "**font-name**, monospace", "fontLink": "**copied link from Google Fonts**” }\
   \
   **Example - { "text": "Karla", "fontFamily": "Karla, sans-serif", "fontLink": "<https://fonts.googleapis.com/css2?family=Karla\\&display=swap>" }**

{% hint style="warning" %}
Ensure that in the Font Names, spaces are indicated with dashes (“-”)
{% endhint %}

{% hint style="info" %}
Delete the “**:wght\@200;300**” section to ensure all weights are available
{% endhint %}

**For Mac:**

1. Ensure all instances of Squirrel are closed and not running. You can check this by looking in the Task Manager
2. Find any text editing tool (such as TextEdit) and open it as an Admin
3. Select File > Open and navigate to the following location\
   Applications/Squirrel/Contents/Resources/app/assets
4. Locate a file named “externalFontList.json” and select Open - you may need to filter the finder to display all files
5. Once open you will see a series of HTML code
6. On the last item in the list, in the end, enter a comma to add a new item to the array. Press return and enter the following

   { "text": "**font-name**", "fontFamily": "**font-name**, monospace", "fontLink": "**copied link from Google Fonts**” }

   **Example - { "text": "Karla", "fontFamily": "Karla, sans-serif", "fontLink": "**[**https://fonts.googleapis.com/css2?family=Karla\&display=swap**](https://fonts.googleapis.com/css2?family=Karla\&display=swap)**" }**

{% hint style="warning" %}
Ensure that in the Font Names, spaces are indicated with dashes (“-”)
{% endhint %}

{% hint style="info" %}
Delete the “**:wght\@200;300**” section to ensure all weights are available
{% endhint %}

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FIhUCySin3qwt3yJVVCwL%2FFontsList_Newfonts.png?alt=media&#x26;token=8fbf4e2e-b8d3-48a8-9e0f-31ac1465ae0a" alt=""><figcaption></figcaption></figure>

After following these steps, **save the file.** You can then head into Squirrel and see that your Font has been added to the list of Fonts available in the property panel.


---

# 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://learn.squirrel365.io/how-tos/adding-your-own-google-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.