---
title: <font-face>
slug: Web/SVG/Element/font-face
tags:
  - Deprecated
  - Element
  - NeedsBrowserCompatibility
  - NeedsExample
  - NeedsMobileBrowserCompatibility
  - Reference
  - SVG
  - SVG Font
browser-compat: svg.elements.font-face
---
{{SVGRef}}{{deprecated_header}}

The **`<font-face>`** [SVG](/en-US/docs/Web/SVG) element corresponds to the CSS {{cssxref("@font-face")}} rule. It defines a font's outer properties.

## Usage context

{{svginfo}}

## Attributes

### Global attributes

- [Core attributes](/en-US/docs/Web/SVG/Attribute#core_attributes)

### Specific attributes

- {{SVGAttr("font-family")}}
- {{SVGAttr("font-style")}}
- {{SVGAttr("font-variant")}}
- {{SVGAttr("font-weight")}}
- {{SVGAttr("font-stretch")}}
- {{SVGAttr("font-size")}}
- {{SVGAttr("unicode-range")}}
- {{SVGAttr("units-per-em")}}
- {{SVGAttr("panose-1")}}
- {{SVGAttr("stemv")}}
- {{SVGAttr("stemh")}}
- {{SVGAttr("slope")}}
- {{SVGAttr("cap-height")}}
- {{SVGAttr("x-height")}}
- {{SVGAttr("accent-height")}}
- {{SVGAttr("ascent")}}
- {{SVGAttr("descent")}}
- {{SVGAttr("widths")}}
- {{SVGAttr("bbox")}}
- {{SVGAttr("ideographic")}}
- {{SVGAttr("alphabetic")}}
- {{SVGAttr("mathematical")}}
- {{SVGAttr("hanging")}}
- {{SVGAttr("v-ideographic")}}
- {{SVGAttr("v-alphabetic")}}
- {{SVGAttr("v-mathematical")}}
- {{SVGAttr("v-hanging")}}
- {{SVGAttr("underline-position")}}
- {{SVGAttr("underline-thickness")}}
- {{SVGAttr("strikethrough-position")}}
- {{SVGAttr("strikethrough-thickness")}}
- {{SVGAttr("overline-position")}}
- {{SVGAttr("overline-thickness")}}

## DOM Interface

This element implements the {{domxref("SVGFontFaceElement")}} interface.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{SVGElement("font")}}
- {{SVGElement("font-face-src")}}
- [SVG tutorial: SVG fonts](/en-US/docs/Web/SVG/Tutorial/SVG_fonts)
