SVG fonts explained: what they are and how to use them
SVG font can mean a colour font, an alphabet sold as SVG artwork, or an old web format. How to tell which you have, and how to use each with a Cricut.
Published
“SVG font” is used for three different things. It can mean a colour font: an ordinary font file whose letters are small SVG drawings, with brush texture or several colours. It can mean an alphabet supplied as SVG artwork, where every letter is a shape to cut and nothing can be typed. And it can mean an old way of storing a font inside an SVG file for websites, which most browsers have dropped. The file ending tells you which you have, and each is used differently.
Which kind is it?
| The download contains | It is | Use it by |
|---|---|---|
| A file ending in .otf or .ttf, often with “SVG” in its name | A colour font (OpenType-SVG) | Installing it like any font |
| Files ending in .svg that show letters as pictures | An alphabet as artwork | Opening or uploading it like any SVG design |
| A .svg file listed beside .woff and .ttf in a web font kit | A legacy SVG web font | Leaving it out |
Colour fonts: OpenType-SVG
An OpenType-SVG font is a normal font file with an extra table inside it that holds each letter as an SVG drawing. An ordinary font can only describe the outline of a letter, which the program then fills with one colour. The SVG table lets a letter carry several colours, gradients and even pixel artwork, which is how fonts with a real brush, watercolour or chalk texture are made.
You install and type with it like any other font. What differs is where it shows properly:
- Programs that support the format show the full painted letters. Current versions of Photoshop and Illustrator do.
- Programs that do not support it fall back to the plain outlines, in one colour.
- Support in web browsers is incomplete, so a colour font meant for a website needs testing in each browser.
Two limits follow from how the letters are made. The colours are part of the drawing, so the text colour setting may have no effect. And where the letters are pixel artwork they are not truly scalable: set very large, the texture goes soft.
Colour fonts and cutting machines
A blade cuts outlines. It cannot reproduce a brush texture or a gradient, so a colour font is a printing font, not a cutting font. To use the painted look on a Cricut or Silhouette project:
- Set the words in a program that shows the font properly.
- Export a PNG with a transparent background.
- Upload the PNG to the cutting program as a print-and-cut image, so that the lettering is printed and the machine cuts round it.
If the cutting program shows the font as plain solid letters, it is using the fallback outlines. Those cut like any other font.
How to add a font to Cricut Design Space
Design Space has no button for uploading a font. It lists the fonts installed on the device, which it calls system fonts, alongside Cricut’s own. So adding a font means installing it on the computer:
- Unzip the download.
- Find the file ending in .otf or .ttf.
- On Windows, right-click it and choose Install. On a Mac, double-click it and choose Install in the window that opens.
- Close Design Space completely and open it again.
- Add text, open the font list, and filter it to system fonts. The new font is listed by name.
With a script font, the letters overlap where they join. Design Space joins overlapping letters by itself for many fonts. If the mat preview still shows every letter outlined separately, go back, select the text and use Weld or Unite.
On a phone or tablet the font must be installed on the device first, which on an iPhone or iPad usually needs a font app and on Android may not be possible. Where the device does list the font, Design Space lists it in the same way.
Alphabets sold as SVG artwork
Many “SVG fonts” in craft shops are not fonts at all. They are drawings of letters, sometimes one .svg file holding the whole alphabet and sometimes one file for each letter. Monogram sets, split letters with a space for a name, and letters decorated with flowers or patterns are usually sold this way, because a font file cannot easily hold that kind of design.
Nothing is installed and nothing can be typed. To use one:
- Upload the .svg as an image, as described in how to upload an SVG to Cricut Design Space, or open it in Silhouette Studio Designer Edition or above.
- Ungroup it.
- Delete or hide the letters you do not need, and move the ones you do into place by hand.
- Select the finished word and use Attach, so that the spacing is kept when it is cut.
The SVG viewer shows what such a file holds before you upload it. Letters that arrive as paths are ready to cut. A file that reports text elements still depends on a font being installed and will not survive the upload.
The legacy SVG font format
The first SVG standard included a way to define a font inside an SVG file, with a <font> element and one <glyph> for each character:
<font id="demo" horiz-adv-x="1000">
<font-face font-family="Demo" units-per-em="1000"/>
<glyph unicode="A" d="M0 0 L500 1000 L1000 0 Z"/>
</font>For a few years web font kits shipped a .svg file of this kind beside the other formats, for early mobile browsers. The feature has since been removed from the SVG standard. Chrome dropped it years ago, Firefox and Edge never supported it, and of the main browsers only Safari still reads it. A website today needs WOFF2 only, and the .svg file in an old kit, with its format("svg") line in the CSS, can be deleted.
Making your own letters as SVG
To turn words in any font into SVG shapes, type them in a vector editor and convert the text to paths: Path, Object to Path in Inkscape, or Type, Create Outlines in Illustrator. The result is ordinary SVG artwork that needs no font. SVG text explains why the conversion matters, and how to make an SVG file covers saving it for a cutter. Check the font’s licence first: many free fonts are for personal use only.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| The “font” will not install | It is a .svg file: artwork, not a font | Upload it as an image and arrange the letters |
| The font is not in the Design Space list | Design Space was open during the install, or the list is filtered | Restart Design Space; show system fonts |
| A textured font shows as plain letters | The program does not support colour fonts | Set the words in one that does and export a PNG |
| The colour of a colour font will not change | Its colours are built into the letters | Choose another font, or recolour the exported picture |
| Script letters are cut apart | The overlapping letters were not joined | Select the text and use Weld or Unite, then cut |
| Uploaded lettering has gaps where words should be | The SVG holds editable text, not shapes | Ask the maker for a version converted to paths |
| A web font in SVG format does not load | Most browsers have dropped the format | Use WOFF2 |
Questions
Is an SVG font better than a normal font? Only when you need what it adds: colour and texture in the letters. For cutting, a normal font is the better tool.
Can a .svg file be turned into an installable font? Yes, with font-making software, which imports a drawing for each letter. It is real work: every character needs drawing and spacing.
Does an SVG file contain its fonts? No. An SVG names the fonts its text uses and relies on the device to have them, unless the text has been converted to shapes.