font-family

The font-family attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.

Note: As a presentation attribute, font-family can be used as a CSS property. See the css font-family property for more information.

You can use this attribute with the following SVG elements:

Example

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-family="Arial, Helvetica, sans-serif">Sans serif</text>
  <text x="100" y="20" font-family="monospace">Monospace</text>
</svg>

Usage notes

Value 
[ <family-name> | <generic-family> ]#
where 
<family-name> = <string> | <custom-ident>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace
Default value Depends on user agent
Animatable Yes

For a description of the values, please refer to the CSS font-family property.

Specifications

Specification Status Comment
CSS Fonts Module Level 4
The definition of 'generic font families' in that specification.		 Working Draft Adds new generic font families, specifically: system-ui, emoji, math, and fangsong.
CSS Fonts Module Level 3
The definition of 'font-family' in that specification.		 Recommendation No significant change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'font-family' in that specification.		 Recommendation Initial definition

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
font-family
?
?
?
?
?
?
?
?
?
?
?
?

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family