Adding your own Google Fonts

More Fonts!

With the release of 1.12, we introduced an array of new properties to expand our available styling options. Additionally, we’ve extended the list of fonts available by adding popular google fonts such as Roboto, Montserrat and Ubunto. In the future, we are looking to give you the ability to manage and add your own fonts! Check out which fonts have been added by reading our 1.12 features blog here.

In the meantime, you can add your own font by editing the files that run behind-the-scenes – not to worry though! It sounds complicated, but this tutorial will guide you through each of the steps to add your own fonts!

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.

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
6. Once open you will see a series of HTML code
7. 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” }

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

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.