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:
In a browser, search for and open Google Fonts
Locate the fonts you would like and add them to the “Selected Families Panel”
Once that is done, view the Selected Families and select any of the fonts - you will see a menu appear
Scroll to find the Use on the web section
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:
Ensure all instances of Squirrel are closed and not running. You can check this by looking in the Task Manager
Find any JSON/ text editing tool (such as Notepad) and “Run as administrator”.
Select File > Open and navigate to the following location C:\Program Files (x86)\InfoSol\Squirrel\resources\app\assets
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
Once open you will see a series of HTML code
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:
Ensure all instances of Squirrel are closed and not running. You can check this by looking in the Task Manager
Find any text editing tool (such as TextEdit) and open it as an Admin
Select File > Open and navigate to the following location Applications/Squirrel/Contents/Resources/app/assets
Locate a file named “externalFontList.json” and select Open - you may need to filter the finder to display all files
Once open you will see a series of HTML code
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.
Last updated