CUTTLE

Version tested: n/a

Browser tested: Windows/Brave (Cuttle is browser-based)

Tested: 06 January 2025 / Missy Meyer

Cost: $19/month or $180/year for Pro

Where to get it: https://cuttle.xyz

Demo version: Yes! But it has a limited number of projects, personal use only, and you can’t upload custom fonts.

Font file types to use: TTF/OTF, double stroke

Image file types to use: SVG

How to See & Use the Fonts

Cuttle has a web-based interface; you upload your own fonts to it, so you don’t necessarily need to have the fonts installed to your computer before starting.

First off, let’s create a new project.  From your Cuttle dashboard, click on the “New Blank Project” box.

To insert text, click on the “Text” option on the left side menu, then click, hold, and drag that text box over onto your workspace.

This will give you a starter text box, with “Aa” showing in the default Noto Sans font.

You have a couple of options for how to edit your text; you can either double-click on the “Aa” in your workspace to get a pop-up box where you can edit that “Aa” into something else, or you can use the “text” box over in the right-hand panel.

Here you can see that I’ve replaced “Aa” with the equally thrilling “Sample.” Now it’s time to change the font!  Over on the right side, the green arrow is pointing out the “font” element. Click on the drop-down menu that currently reads “Noto Sans (regular)” to be able to choose a new font.

Cuttle has a number of single-line fonts already installed, including several of mine!  If you click on the “Single Line Pro” option, you can choose from a bunch of my fonts (and possibly fonts from other creators in the future) if you have a Pro membership. These are all true single-line fonts; your pen/stylus will only go from the start point to the end point once, without retracing the path back from end to start again.

But let’s say you have a different font of your own you want to use. OR, you want to use the double stroke version that will trace each path twice, from start point to end point and then back again from end to start point.

You can upload any of your own fonts you like!  These fonts are only held in your own account on Cuttle, and can’t be shared with others, so most font licenses are fine with this type of upload. (And you only have to upload once; after that, anything you’ve uploaded will show up in the “My Fonts” area in this same drop-down menu.)

To upload, start by clicking on the “Add Font” button. You’ll get a pop-up that lets you navigate to the location where your font file is living. Click on the double stroke version (if it’s one of my fonts, it will have the number “2” at the end of the name) and then click the “Open” button at the bottom right of the pop-up.

Your text is now changed to your uploaded font!

At this point, you’ll probably want to release the letters from each other so that you can resize, rotate, and adjust the position of each character.  With your text selected, go to Edit > Convert to Paths in the top menu bar.  Be aware, when you convert the text into vector paths, it can’t be retyped anymore.

Now that the letters have been made into vector paths, all of the characters are together in one group. Go to Edit > Ungroup in the top menu bar, or use the Ctrl+Shift+G shortcut to ungroup the letters.

Each letter is now its own individual vector shape!  They can each be selected and rotated, resized, or rearranged.

When you’re ready to save your design as an SVG file so that you can upload it into other programs, go to File > Export SVG… in the top menu bar.

This will give you a small pop-up where you can name your file, and choose if you’d like to save it with some specialty settings.  As of the time of writing this guide, that “Optimize for Device” drop-down contains options for Glowforge and Cricut. There may be additional options added in the future.

Click on the blue “Download” button, and your SVG file will be downloaded to your selected folder!

How to Access Alternates, Ligatures, and Extended Character Sets

As of the time of writing this guide, Cuttle does not have a built-in way to access alternates, ligatures, or other extended characters contained within a font. But no worries, they’re easy to add from a secondary source, as long as you have a licensed copy of the font!

Here I’m using Muggsy Sketch, the single stroke version that is already installed in Cuttle. I’ve typed in “Buggy,” but I’d like to replace those two regular Gs with the double-G ligature. Because I have a licensed copy of Muggsy Sketch of my own, I can pull it up in a font manager program (or a built-in character grid like Windows Character Map or Font Book) to grab that ligature.

MainType for PC is my favorite font manager program; here I’ve gone to Muggsy Sketch (though if you have a licensed copy of the regular Muggsy font, you can use that too – the characters are the same) and I’ve selected that double-G ligature.  I use the Ctrl+C shortcut to copy the character…

And over in the right side text box, I paste in the double-G ligature in place of the two regular Gs, using the Ctrl+V shortcut.  Yes, it shows a weird character on the right side; since the ligature lives in the Private Use Area, which is a place that font designers can put whatever they want, it’s never the same character from font to font. But you can see in the center, I now have that ligature with two different Gs, giving this a hand-written look.

Once you have all of the alternates and ligatures in place, you can convert the text to paths and then ungroup the letters as shown before. Except…

When you expand the characters to paths, any multi-letter ligature will come through as a compound path, so those characters are still stuck together. Never fear, it’s an easy fix!

With that compound path selected, go to Edit > Release Compound Path in the top menu. This will set those Gs free, so that each one can be moved around willy-nilly.

At this point, you can rearrange, rotate, resize, and create the design of your dreams. When you’re ready, you can export to SVG as shown above!

How to Use SVG or Other Alphabet Sets

Some folks prefer to use a file that contains all of the characters of a font, instead of typing things out. If the font you’d like to use contains one of those files, Cuttle still makes it easy to use!

In the top bar menu, go to File > Import SVG or Image…

You’ll get a pop-up window where you can navigate to where the file lives on your computer. Single-click on the file to select it, then click the “Open” button in the bottom right of that pop-up to open the file in your workspace.

The file will be placed starting at the 0:0 coordinates in your workspace. The characters may be grouped together, depending on the file. If that’s the case…

With the characters selected, go to Edit > Ungroup in the top bar menu. This will release the characters into their own separate objects.

Once the characters are ungrouped, grab the ones you want to use and drag them over to the side in your workspace.

After you’ve brought over all of the letters you want to use, you can draw a selection box around the rest of the letters, and press your Delete key to get rid of them.

Now you can rotate, resize, and arrange the letters into your design.

But wait, what’s this?  Suddenly part of the E at the end is missing!

No worries, this isn’t an issue with the E; it’s just hidden from view.

Because these are single strokes with open areas, Cuttle (and most other vector design programs) will fill the area with a color; it doesn’t quite know what to do about the start and end points not meeting like they do in a regular outline font, so the program just throws a straight line between the start and end points when creating that color fill. Because the default fill color is white, we just couldn’t see it on the white background. Here I’ve changed the fill color to yellow so that you can see what’s going on.

Easy fix!  With the text selected, go to the “Fill” area on the right. You’ll see a “color” line, and it’ll probably have a white square next to it (since you probably haven’t changed your fill color to this sickly yellow).  Click on that white square, and you’ll get a color picker.  Click on the white box with the red diagonal stripe through it, and it will turn the fill color invisible.

And with that fill turned invisible, you can now see the rest of the E.

The design is now ready to be exported to an SVG file as shown above!  You don’t need to convert these to curves; they’re already vector shapes, so the text is all ready to go and SVG-friendly.

If this program has been updated since this test and this guide no longer works, please drop me a line at the contact form so I can update this page!