Adding your own Google Fonts

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.

Here’s what you need to do:

Locate the Font you want:

1. In a browser, search for and open Google Fonts

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.

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

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" }

Ensure that in the Font Names, spaces are indicated with dashes (“-”)

Delete the “:wght@200;300” section to ensure all weights are available

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" }

Ensure that in the Font Names, spaces are indicated with dashes (“-”)

Delete the “:wght@200;300” section to ensure all weights are available

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.