Using fonts in SVG
SVG supports multiple ways to specify fonts for<text> elements.The recommended modern approach is to use CSS, in much the same way as you would style fonts in HTML.
Apply and style a font using CSS
The code below shows how you might style the given<text> element with a particular font using CSS: in this case the system font "Courier New".Note that the CSS here is nested within an SVG<style> element, but could also be applied in the including HTML.
<svg> <style> text { /* Specify the system or custom font to use */ font-family: "Courier New", sans-serif; /* Add other styling */ font-size: 24px; font-weight: bold; font-style: italic; } </style> <text x="10" y="20">Some text</text></svg>This renders as shown below:
Using web fonts with@font-face
The previous section uses CSS to apply a system font, but you can apply a web font specified using the@font-face at-rule in exactly same way.
The example demonstrates how, first defining and then using a font family named "FiraSans":
<svg viewBox="0 0 400 50" width="350" height="50" xmlns="http://www.w3.org/2000/svg"> <style> /* Define the font family using web fonts */ @font-face { font-family: "FiraSans"; src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Italic.woff2") format("woff2"), url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2") format("woff2"); } /* Style the text */ text { /* Specify the system or custom font to use */ font-family: "FiraSans", sans-serif; /* Add other styling */ font-size: 24px; font-weight: bold; font-style: italic; } </style> <text x="10" y="20">Text styled with custom font</text></svg>Referencing a style in the text element
You can also directly reference a style within a<text> element using thefont-family attribute.This code shows how we might apply the custom "My Font" to the<text> element.
<svg> <text font-family="My Font" x="10" y="20">Text using "My Font" font</text></svg>Note that this is similar to applying style to an HTML element.While there are cases where it can be useful, generally it is better to use CSS and CSS selectors.