Fonts

Fonts in wobble fall under two categories. Web safe and custom fonts.

web safe fonts

Web safe fonts include the following:

system-ui
Arial
Cambria
Courier New
cursive
fantasy
Franklin Gothic Medium
Georgia
Gill Sans
Impact
Lucida Sans
monospace
sans-serif
Segoe UI
serif
Times New Roman
Trebuchet MS
Verdana

These can be included in a website without the need to load any external fonts as the files are already available on most devices.

custom fonts

In the editor there are a number of fun custom fonts that we have added. All code related to custom fonts is located at packages/fonts. Custom fonts are lazy loaded in the editor (both on selection and load) to ensure font files are not loaded unnecessarily.

Current custom fonts:

Pinyon Script, design by Nicole Fally
Open Dyslexic, designed by Abbie Gonzalez
Anthony, designed by Sun Young Oh
Panchi Mono, designed by Erwan Le Rétif

When a site is exported with a custom font, this font file is encoded to Base64 and added to the exported html file inside the <head> tag. Only custom fonts that are used in the document are included in the export.

add a new custom font

Add a web friendly font file (e.g. .woff or .woff2) inside the packages/fonts/src/assets folder.
Add the font to the fonts object in packages/fonts/src/index.js with a name and the path to the font file.
Add the font to the dropdown in the editor by adding it to the font-family in packages/editor/src/components/style-editor/utils/css-data.js.
The custom font will now be available in the editor.
Make a merge request explaining the new font you have added.

We plan to support dragging and dropping of custom fonts at some point in the future.