How to Use Custom Fonts in Svg Files on Mac: a Step-by-Step Guide

If you design SVG files on a Mac and the text never looks quite right when someone else opens your file, you already know the problem. The font you chose doesn't carry over, and the whole design falls apart. Getting custom fonts to work properly inside SVG files on macOS takes a few specific steps, and skipping any of them leads to broken text, missing characters, or a design that looks nothing like what you intended. This guide walks you through exactly how to do it right.

What does it mean to use custom fonts in an SVG file?

An SVG file is a vector-based format commonly used for cutting machines like Cricut and Silhouette, as well as web graphics. When you add text to an SVG using a font like Bromello or Great Vibes, the SVG file itself does not embed the font. It only stores a reference to the font name. If the person opening the file doesn't have that font installed on their own computer, the text reverts to a default font or breaks entirely.

Using custom fonts in SVG files means you either need to convert the text to paths (outlines) before saving, or make sure the font is installed on every machine that will open the file. On a Mac, both approaches have specific steps that matter.

Why do designers convert text to outlines in SVGs?

Converting text to outlines turns each letter into a vector shape instead of live, editable text. This is the most reliable way to preserve how your design looks, because the shapes travel with the file. No font installation is needed on the receiving end.

This matters most when you share SVG files for cutting machines. Someone using Cricut Design Space or Silhouette Studio on a different computer will see exactly the shapes you designed, not a substituted font that throws off spacing, size, or cut lines.

Fonts like Playlist Script or Sacramento look beautiful but have fine swashes and ligatures that can shift or disappear if the font isn't installed. Outlining solves that problem at the source.

How do you convert text to paths in SVG on a Mac?

You can do this in several Mac-compatible design tools. Here are the most common options:

In Adobe Illustrator

Type your text using the Type tool.
Select the text with the Selection tool.
Go to Type > Create Outlines (or press Shift+Cmd+O).
Save or Export as SVG. Make sure the text option is set to "Outline" in the export dialog.

In Inkscape (free, open-source)

Type your text using the Text tool.
Select the text object.
Go to Path > Object to Path (or press Shift+Ctrl+C).
Save as Plain SVG or Optimized SVG.

In Affinity Designer

Type your text.
Select it and go to Layer > Convert to Curves.
Export as SVG from the File menu.

In every case, once you convert to outlines, you can no longer edit the text by typing. Keep a copy of your working file with live text before converting.

How do you install custom fonts on a Mac for SVG work?

Sometimes you want to keep text editable in the SVG, or you're working on a project where outline conversion isn't ideal. In that case, the font needs to be installed on your Mac.

Download the font file (usually .ttf or .otf).
Double-click the file. Font Book opens automatically.
Click Install Font in the lower right corner.
The font is now available in Illustrator, Inkscape, Affinity Designer, and other apps.

You can also drag font files directly into Font Book or into ~/Library/Fonts/ for your user account only. Fonts installed this way are available system-wide to any app that reads installed fonts.

What fonts work best for SVG cutting files?

Not every font cuts well. Fonts with very thin strokes, excessive detail, or overlapping paths can cause problems with cutting machines. Here are traits to look for:

Clean outlines with minimal overlapping nodes
Consistent stroke width thin script fonts sometimes cut poorly on vinyl
Good kerning letters should not crash into each other when used at small sizes
No raster elements true vector fonts only; some "fonts" sold online are actually PNG images

Display and sans-serif fonts like Bebas Neue tend to cut cleanly because of their bold, simple shapes. Script fonts like Alex Brush work well too, but you may need to weld overlapping letters in your cutting software before cutting. If you're looking for a wider selection of options that pair well with SVG projects, check out these fonts that work well with SVG cutting files.

Why does my SVG text look wrong after saving?

This is the most common issue people hit on a Mac. There are a few causes:

The font wasn't outlined before saving. If someone opens your SVG without the font installed, the text shifts or replaces with a fallback font.
You used a web font or app-specific font. Some fonts only work inside specific apps or browsers. They won't carry over to other environments.
Font kerning or ligature settings changed. SVG export may not preserve OpenType features like stylistic alternates or contextual ligatures. Check your text appearance after converting.
The SVG was saved with font embedding disabled. Some tools let you embed fonts in SVG, but this increases file size and not all apps support it. Outlining is more dependable.

A good practice is to always open your saved SVG in a different app (like a browser or Inkscape) to verify the text looks correct before sharing the file.

Can you use custom fonts in SVG files created on an iPad?

Yes, but the workflow is different. On iPad, you typically use apps like Affinity Designer, Vectornator (now Linearity Curve), or Procreate to create designs, then export as SVG. Custom fonts need to be installed on the iPad first, usually through a font installer app or by syncing via a configuration profile. If you need help with that process, here's a guide on installing script fonts on iPad for SVG crafting.

What about using custom fonts in SVG on Windows?

The same principles apply on Windows install the font or convert text to outlines. The steps for installing and exporting vary slightly depending on whether you use Illustrator, Inkscape, or another tool. If you also work on a Windows machine, we cover the full process in our guide to installing fonts for SVG projects on Windows.

Common mistakes to avoid

Not saving a backup with live text. Once you outline, you can't edit. Always keep a working file.
Using fonts with too many nodes. Complex fonts create massive SVG files and slow down cutting software. Simplify paths after outlining if needed.
Ignoring commercial licensing. Some fonts are free for personal use only. If you sell SVG files or finished products, make sure your license covers that.
Forgetting to check overlap. Script fonts like Allura often have overlapping letter connections. In cutting software, you need to weld these so the machine cuts the word as one piece, not individual overlapping shapes.
Exporting from Preview or Pages. These Mac apps are not SVG design tools. Use a proper vector editor to get clean, predictable output.

Tips for clean results every time

Always preview your SVG in a browser after exporting. Browsers render SVGs faithfully, so this is a quick way to spot problems.
Group text elements after outlining. This keeps them organized and prevents accidental edits to individual letter shapes.
Use the "SVG 1.1" profile when exporting for maximum compatibility with cutting software.
If your design has both text and cut lines, put them on separate layers. This makes it easier for the end user to work with.
Test your SVG in the actual cutting software (Cricut Design Space, Silhouette Studio) before sharing or selling. What looks right in Illustrator may behave differently in a cutting app.

Quick checklist before you share or sell your SVG

Font is installed on your Mac or text has been converted to outlines
You saved a separate working file with editable text
SVG was exported using a vector editor, not a general-purpose app
Overlapping script letters have been welded or merged
File was opened in a browser or second app to verify appearance
Font licensing allows your intended use (personal or commercial)
Design was tested in the target cutting software

Start by picking one font, outlining it in your SVG editor of choice, and testing the full export-and-open workflow on your Mac. Once that works smoothly, you'll have a repeatable process you can use for every SVG project going forward.

Download Now