Skip to content

Creating new font symbols

Amanda Ho-Lyn edited this page Mar 14, 2024 · 2 revisions

New font glyphs can be added to the site through the process of drawing the glyphs, creating an otf file and then adding that to the repository.

glyphr studio

Previously, glyphr studio has been used for this as it allows entering of custom unicode ranges and creating symbols that don't line up with the typical latin alphabet.

To repeat the process, first note how many new characters you will need to create and check in the db for what subrange of the unicode private use areas is available to you. Once you know what unicode you'll assign to your symbols, you can head the the glyphr studio app and create a new project (unless you already have a project file and are editing preexisting glyphs). If this is the first time after fractions that symbols are being added, you can probably start from U+E043 as you will have a consistent range from that character.

Navigate to the settings section by clicking the dark header named "overview". Here, you'll see options to add custom character ranges. The image below shows a range used in this project already. The basic latin range has been hidden and can be deleted as it wasn't applicable to this use case. image

The menu on the side has a Font section which you can use to edit the font metadata - we set our font-family to Alphabetum to stick with the preferred font of this project.

To draw the new glyphs, click the dark header and click on characters. With the private use unicodes, you will see that it says editing [name not found] and doesn't provide a template character. It is important to note that when you start drawing, the character doesn't have any width just from drawing, you need to add it - you can use the button by the advance width parameter and edit the value if you'd like some extra padding. The image below shows what you should see when you've created a character. image

It is recommended that you set aside some time getting used to the interface and how drawing the symbols works as you don't draw a shape in the typical way as in MS paint etc. You fill in the area between points, and the width and curvature of which can be determined by the satellite arms of each point (seen below). image

When you're satisfied with your character, you may have to click on the name area of the character (editing [name not found]) and click on the next blank character as it will try to navigate you to a known character range with the "next" button (eg. basic latin)

Once you're satisfied with all of your glyphs, you can edit the kerning or do ligatures, neither of which have been used in creating the fraction symbols for this project as they were not needed. After any editing there, double check you're happy with the meta data and then you can export it as an otf file. It will save as the font family name so you may want to change this after downloading to distinguish the files more easily. If you have not created an account, you may also want to save the project file so you can make changes in the future.

Adding the new glyphs to the project

Add the otf files to the static/fonts folder and in the alphabetum.css file, import the file and ideally define the unicode ranges, as with the others in that file. Once this has been done, you should be able to follow the instructions for adding symbols to the symbol picker and the symbols should then be valid for use. You may want to create a symbol group to more easily access them from the picker.