How do I set SVG font-family?

Pick a stack and click Set family. The value is written on every and , including style attributes. Same family again is a no-op.

How is changing font-family different from converting text to path?

Text to path replaces with outlined path data so the font file is not needed later. This page keeps a live string and only writes font-family — you can still edit the letters.

Will the preview use a font that is not installed?

The preview uses whatever the browser can resolve from the stack (Syne is on this site; Georgia, Arial, Courier New, and system-ui fall back). Missing faces drop to the next family in the list.

Does font-family change letter-spacing or textLength?

No. Those attributes stay. Set letter-spacing / Set textLength if you need tracking or a target run width after the face change.

Set SVG font-family — Free Tool

FAQ

Quick answers

How do I set SVG font-family?: Pick a stack and click Set family. The value is written on every <text> and <tspan>, including style attributes. Same family again is a no-op.
How is changing font-family different from converting text to path?: Text to path replaces <text> with outlined path data so the font file is not needed later. This page keeps a live string and only writes font-family — you can still edit the letters.
Will the preview use a font that is not installed?: The preview uses whatever the browser can resolve from the stack (Syne is on this site; Georgia, Arial, Courier New, and system-ui fall back). Missing faces drop to the next family in the list.
Does font-family change letter-spacing or textLength?: No. Those attributes stay. Set letter-spacing / Set textLength if you need tracking or a target run width after the face change.

Text to path → Set font-size → Set font-weight → Set font-style →

Privacy Terms

Source

Family

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG font-family

Live preview