How do I set SVG font-weight?

Pick 300, 400, 700, or 800 and click Set weight. The value is written on every and , including style attributes. Same weight again is a no-op.

How is font-weight different from stroking text to fake bold?

Outline with stroke adds a contour around shapes. font-weight asks the font for a heavier or lighter cut of the same face. Letters stay editable text.

Does font-weight change the font-family?

No. Only weight is written. Set font-family if you need a different stack; Set font-style for italic.

Will a face without a 300 cut look the same as 400?

Yes, if that file is not in the font. This site only ships Syne 700 and 800, so 300–700 on Syne all look like 700. The sample uses Arial, which has a real 400 and 700. 300 still snaps to 400; 800 may match 700 unless the face has an extra-bold cut.

Set SVG font-weight — Free Tool

FAQ

Quick answers

How do I set SVG font-weight?: Pick 300, 400, 700, or 800 and click Set weight. The value is written on every <text> and <tspan>, including style attributes. Same weight again is a no-op.
How is font-weight different from stroking text to fake bold?: Outline with stroke adds a contour around shapes. font-weight asks the font for a heavier or lighter cut of the same face. Letters stay editable text.
Does font-weight change the font-family?: No. Only weight is written. Set font-family if you need a different stack; Set font-style for italic.
Will a face without a 300 cut look the same as 400?: Yes, if that file is not in the font. This site only ships Syne 700 and 800, so 300–700 on Syne all look like 700. The sample uses Arial, which has a real 400 and 700. 300 still snaps to 400; 800 may match 700 unless the face has an extra-bold cut.

Set font-family → Outline with stroke → Set font-size → Set font-style →

Privacy Terms

Source

Weight

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Set SVG font-weight

Live preview