How to Use Fonts in SVG

May 15, 2020 · Thomas Yip
Software Development Director · Web Design · Everything SVG

So you have an SVG with some text and would like them rendered with your selected fonts, how do you do that? Read on to find out more on how to use fonts in your SVG.

Different ways to embed SVG

You may embed your SVG using inline, object, or img tag, and each of them requires a different approach to embedding fonts, mainly because of limitations for each type of embedding.

Using fonts with inline embedding

For inline, the SVG becomes part of your DOM, and therefore can be easily styled with CSS like any part of your HTML. For example, below we have 3 lines of text with different fonts, and we specify the font family using inline attributes.

<svg xmlns="http://www.w3.org/2000/svg" width="450" height="160" stroke="#000" 
    text-anchor="middle" font-size="24">
    <g stroke="none">
        <text font-family="Roboto Condensed" x="225.5" y="43.42">
            This is a Roboto Condensed font
        </text>
        <text font-family="Open Sans" x="225.5" y="88.42">
            This is a Open Sans font
        </text>
        <text font-family="Anonymous Pro" x="225.5" y="133.42">
            This is a Anonymous Pro font
        </text>
    </g>
</svg>

Styling inline svg with css

You will have to include the fonts on your page, the the browser will automatically load the fonts and render the SVG properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i" />
</head>
<body>
<!-- Your inline svg here -->
</body>
</html>

Alternatively, you can also use classes, id or tags to style your elements, as below

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i" />
    <style>
        .font_a { font-family: "Roboto Condensed" }
        .font_b { font-family: "Open Sans" }
        .font_c { font-family: "Anonymous Pro" }
    </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="160" stroke="#000" 
    text-anchor="middle" font-size="24">
    <g stroke="none">
        <text class="font_a" x="225.5" y="43.42">
            This is a Roboto Condensed font
        </text>
        <text class="font_b" x="225.5" y="88.42">
            This is a Open Sans font
        </text>
        <text class="font_c" x="225.5" y="133.42">
            This is a Anonymous Pro font
        </text>
    </g>
</svg>
</body>
</html>

Advantages

Very easy to use, just include the fonts in your page.
If all SVG are inlined, all of them can share the same fonts.

Disadvantages

Inlined SVG are not cached.
Can be hard to maintain if we have a lot of SVG and differing fonts, as all of them must be included.

Using fonts with Object tags

To use fonts in object tags, you will need to embed font imports into your SVG through the use of style tags:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="150" font-size="24" text-anchor="middle">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i");
        @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i");
        @import url("https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i");
    </style>
    <text font-family="Roboto Condensed" x="190" y="32.92">
        This is a Roboto Condensed font
    </text>
    <text font-family="Open Sans" x="190" y="82.92">
        This is a Open Sans font
    </text>
    <text font-family="Anonymous Pro" x="190" y="132.92">
        This is a Anonymous Pro font
    </text>
</svg>

Sample svg with fonts embedded using object tag

Because object tags are allowed to access external fonts, embedding these fonts imports into the SVG will work fine. You cannot import these fonts into your main page once and use it on your object tags, because the SVG inside the object tag will not be able to access these imports.

Simply said, you need to embed these font imports into every SVG file you intended to use with object tags.

Advantages

Relatively easy to use fonts on object tags
Can refer to external font files

Disadvantages

Have to insert font imports

The alternative is to use Nano and insert the fonts automatically using object mode (requires a pro account).

Using fonts with `img` tags

To use fonts with img tags you will need to embed the fonts, nothing else works.

The hard way

Locate the .ttf file for your font
Go to an online converter and convert it to base64
Embed into your SVG as below

<svg xmlns="http://www.w3.org/2000/svg" width="450" height="150" font-size="24" text-anchor="middle">
    <defs>
        <style>
            @font-face{
                font-family:"Roboto Condensed";
                src:url(data:application/font-woff;charset=utf-8;base64,your_base64_encoded_long_string) format("woff"); 
                font-weight:normal;font-style:normal;
            }
            @font-face{
                font-family:"Open Sans";
                src:url(data:application/font-woff;charset=utf-8;base64,your_base64_encoded_long_string) format("woff"); 
                font-weight:normal;font-style:normal;
            }
            @font-face{
                font-family:"Anonymous Pro";
                src:url(data:application/font-woff;charset=utf-8;base64,your_base64_encoded_long_string) format("woff"); 
                font-weight:normal;font-style:normal;
            }
        </style>
    </defs>
        <text font-family="Roboto Condensed" x="190" y="32.92">
        This is a Roboto Condensed font
    </text>
    <text font-family="Open Sans" x="190" y="82.92">
        This is a Open Sans font
    </text>
    <text font-family="Anonymous Pro" x="190" y="132.92">
        This is a Anonymous Pro font
    </text>
</svg>

As you can see, you will need to embed all font weights being used. If you used bold, you will need to embed that, and italics too, if you use it. How do you know you are using it? Unfortunately, you will have to check it yourself, and that's the reason it is called the hard way.

The easy way

To embed fonts into your SVG the easy way:

Drop your SVG into Nano

You're done, as Nano will automatically scan and embed fonts only if you need it.

Advantages

Everything is encapsulated without the need for external fonts

Disadvantages

Can be difficult to embed fonts, unless done using automated tools

I sincerely hoped that the article has helped you to use SVG easier, faster and better.

AUTHOR

Thomas Yip
Software Development Director

As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.

How to Use Fonts in SVG

Different ways to embed SVG

Using fonts with inline embedding

Styling inline svg with css

Advantages

Disadvantages

Using fonts with Object tags

Advantages

Disadvantages

Using fonts with img tags

The hard way

The easy way

Advantages

Disadvantages

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

Convert DXF to SVG with Nano and reduce file size by 90%

The best way to make image maps (2020)

Introducing SVG flattening for laser and vinyl cutting

Using fonts with `img` tags